Javascript loop get name of checked checkbox

Question

I have HTML to display checkbox those checked via a loop:

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>

    <body>
        <form>
            <input type="checkbox" name="bla_bla1" id="checkbox_1" onchange="getName();"/>
            <input type="checkbox" name="bla_bla2" id="checkbox_2" onchange="getName();"/>
            <input type="checkbox" name="bla_bla3" id="checkbox_3" onchange="getName();"/>
        </form>     
        <span id="checkboxConfirm_1"></span>
        <span id="checkboxConfirm_2"></span>
        <span id="checkboxConfirm_3"></span>

        <script>            
            function getName(){
                for(i = 1; i<4; i++){
                var a = "#checkbox_".concat(i.toString()) ;
                var b = "#checkboxConfirm_".concat(i.toString());               

                if ((a).is(":checked")) {
                    $(b).text($(a).attr("name"));
                } else {
                    $(b).text('');
                }
            }
            }
        </script>   
    </body>
</html>

But Javascript not work. Please help me resolve the problem.

try if ($(a).is(":checked")) {

Tamil Selvan C
– Tamil Selvan C

2015-06-29 03:40:01 +00:00
Commented Jun 29, 2015 at 3:40 — Tamil Selvan C
– Tamil Selvan C, Commented Jun 29, 2015 at 3:40
make 'a' query object by doing $(a)

Sudhir Bastakoti
– Sudhir Bastakoti

2015-06-29 04:10:07 +00:00
Commented Jun 29, 2015 at 4:10 — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Jun 29, 2015 at 4:10

Keval Bhatt · Accepted Answer · 2015-06-29 05:16:20Z

3

Don't use onChange for every checkbox And no need to use for loop use regex selector of css and it will solve your problem.

see this example: http://jsfiddle.net/kevalbhatt18/gpdjoyxx/1/

$('input[type="checkbox"]').change(function () { var index = $(this).index(); console.log(index) console.log($("span[id^=checkboxConfirm]").eq(index)) if ($(this).is(':checked')) { $("span[id^=checkboxConfirm]").eq(index).html($(this).attr("name")); } else { $("span[id^=checkboxConfirm]").eq(index).html(''); } })

answered Jun 29, 2015 at 5:16

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajowi · Accepted Answer · 2022-07-17 13:18:56Z

0

If you are in a position to use jQuery, then you can anchor on the exact form-id and loop as shown below. You can then create an array on that loop of use it however you want:

let cbCheckedArray = [];
let currentVal = '';    //may always just be 'on'
let currentName = '';
$("#form-id input:checkbox:checked").each(function() {
    currentVal = $(this).val();
    currentName = $(this).attr("name");
    cbCheckedArray.push(currentName);
    alert('here: '+currentName);
});

answered Jul 17, 2022 at 13:18

Ajowi

5355 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript loop get name of checked checkbox

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related