How to create multiple checkbox handlers in jQuery?

Question

I have these 2 checkboxes:

<form action="">
    <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

The events for each checkbox:

jQuery(function () {
$("#carCheckbox").click(function () {
    if($("#carCheckbox").is(":checked")) {
        alert("it works");
    }
})
});

jQuery(function () {
$("#carCheckbox").click(function () {
    if($("#bikeCheckbox").is(":checked")) {
        alert("it works");
    }
})
});

Now what I want to do is create a for or some kind of loop to create event handlers for multiple checkboxes. So far I am stuck at this code:

jQuery(function () {
var infoArray = ["car", "bike"];

for(var i = 0; i < infoArray.length; i++) {
    var id = "#" + infoArray[i] + "Checkbox";

    $(id).click(function () {
        var myCheckbox = "#" + infoArray[i] + "Checkbox;
        if($(myCheckbox).is(":checked")) {
            alert("it works");
        }
    })
}
});

Any help is greatly appreciated.

used this stack over flow question stackoverflow.com/questions/11945802/… — Ankur Bhadania
– Ankur Bhadania, Commented Jul 3, 2013 at 6:53
Do they need to be separate functions for each? Because if each checkbox calls the same function you're overcomplicating this. Can you explain, in more detail, what you want? — David Thomas
– David Thomas, Commented Jul 3, 2013 at 6:54
I actually have 35 checkboxes in the code and I was looking for a way to reduce the amount of repeating code. Is that thinking flawed ? — Mythul
– Mythul, Commented Jul 3, 2013 at 6:55
It depends entirely on what you're trying to do: is it the same function each time, or different functions? — David Thomas
– David Thomas, Commented Jul 3, 2013 at 9:56

Ankur Bhadania · Accepted Answer · 2013-07-03 09:23:44Z

8

<form action="">
    <input id="bikeCheckbox" class="mybox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="mybox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

$('#save_value').click(function(){
$('.mybox:checked').each(function(){
     alert($(this).val());
}); });

you try to add class name same for ever check box and used the

edited Jul 3, 2013 at 9:23

answered Jul 3, 2013 at 6:58

Ankur Bhadania

4,1681 gold badge25 silver badges40 bronze badges

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

Comments

Timmetje · Accepted Answer · 2013-07-03 07:04:00Z

You don't need to create an array to save all these values and loop these. And you definitely don't need a function for each checkbox!

Add a class to your checkboxes you want to check, for example :

<form action="">
    <input id="bikeCheckbox" class="mycheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="mycheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

Then you can easily loop like this:

jQuery(function () {
    // Whenever any of these checkboxes is clicked
    $("input.mycheckbox").click(function () {
        // Loop all these checkboxes which are checked
        $("input.mycheckbox:checked").each(function(){
            alert("it works");
            // Use $(this).val() to get the Bike, Car etc.. value
        });
    })
});

DDK · Accepted Answer · 2013-07-03 06:55:08Z

1

use JQuery's each function

jQuery(function () {
    $(":checkbox").click(function () {
         $(':checkbox:checked').each(function(i){
            alert("it works");
          });
     });
}

answered Jul 3, 2013 at 6:55

DDK

1,03620 silver badges40 bronze badges

Comments

Raghurocks · Accepted Answer · 2013-07-03 06:56:52Z

1

if you want to do it by some grouping, like if you want to see only in some of the checkbox in a group, you can use the class name like this below

<form action="">
    <input id="bikeCheckbox" class="myCheckBoxGroup" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="myCheckBoxGroup" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>
jQuery(function () {
    $(".myCheckBoxGroup").click(function () {
        $(".myCheckBoxGroup").each(function(){
            if($(this).is(":checked")) {
                alert("this is checked");
            }
        });
    })
});

answered Jul 3, 2013 at 6:56

Raghurocks

9258 silver badges20 bronze badges

Comments

Jaimin · Accepted Answer · 2013-07-03 06:56:58Z

Try this.

<input id="chk_bikeCheckbox"  type="checkbox" onclick='UpdateIdinHF(this);' name="bikeCheckbox" value="Bike">
<input id="chk_carCheckbox" class="mycheckbox" onclick='UpdateIdinHF(this);' type="checkbox" name="carCheckbox" value="Car">






 function UpdateIdinHF(obj) {
        var id = $(obj).attr('id');
        var name = $(obj).attr('name');
        var value = parseInt($(obj).attr('value'));
        var IsChecked = $(obj).is(':checked');

            $('input[id*="chk_' + name + '"]').each(function () {
                if (parseInt($(this).val()) != 0) {
                    if (IsChecked == true) {
                        $(this).attr('checked', 'checked');

                    }
                    else {
                        $(this).removeAttr('checked');

                    }
                }
            });

    }

Shinov T · Accepted Answer · 2013-07-03 07:01:18Z

1

You can try this also

<script TYPE="text/javascript">
     jQuery(function () {
       var infoArray = ["car", "bike"];

       for(var i = 0; i < infoArray.length; i++) {
            var id = "#"+infoArray[i]+"Checkbox";
            $(id).click(function () {
               if($(id).is(":checked")) {
                 alert("it works");
               }
            })
       }
     });
</script>

answered Jul 3, 2013 at 7:01

Shinov T

8625 silver badges9 bronze badges

Comments

Reza Nikfal · Accepted Answer · 2019-10-31 15:05:26Z

1

You don't need to define classes. Use the following snippet to directly access to the checkbox you have clicked.

$(document).on("click", "input[type='checkbox']", function (e) {
     console.log(e.target);
});

answered Oct 31, 2019 at 15:05

Reza Nikfal

1,0131 gold badge14 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to create multiple checkbox handlers in jQuery?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related