Geek Answers Handbook

JQuery: binding to multiple checkboxes

For a bit of background, I have several flags, each of which is weighted with a different “score”. When the checkbox changes, I need to calculate the score. I thought something like the following would work, but it doesn't look like the .change event is properly connected.

$(document).ready(function() { bindSomeCheckboxes(); }); function bindSomeCheckboxes() { var score=0; var checkboxes = { "id_1" : 3, "id_2" : 1, "id_3" : 2, "id_4" : 5 }; $.each(checkboxes, function(key, value) { $("#"+key).change(function(key,value) { if ($("#"+key).is(':checked')) { //add this ids value to score } else { //subtract value from score } }); }); }

I know that it iterates over the array correctly, but warnings in .change are never visible.

+7
jquery binding
source share
4 answers

If you really wanted to use this approach to use identifiers, I would create a separate array of identifiers and do .join() to create a selector.

Some notes:

  • Instead of .is(':clicked') or .is(':checked') use this.checked . Much more effective.
  • Event handlers in jQuery have one parameter that refers to event . You have 2 for key,value . This makes the key in the handler reference this event object instead of the key from $.each() .
  • Inside the handler, this refers to the one that was clicked.
  • Since you have a this reference to an element, you do not need a key reference in $.each() . You can just do this.id
 function bindSomeCheckboxes() { var score=0; var checkboxes = { "id_1" : 3, "id_2" : 1, "id_3" : 2, "id_4" : 5 }; var arrayOfIds = []; // to store array of ids $.each(checkboxes,function(key, val) { // populate array with ids arrayOfIds.push( key ); }); // create a selector of the IDs $( "#" + arrayOfIds.join(',#') ).change(function() { // alert the score alert( checkboxes[ this.id ] ); if ( this.checked ) { //do something when it is checked } else { //do something else } }); }
+4
source share

I recommend that you add a container and immediately select all the checkboxes.

As for your question, the event signature is incorrect, then the correct function(e){} . In addition, you should check if the item is checked, and not click.

 $("#chk").change(function(e){ if ($(this).is(":checked")) alert("checked"); else alert("not checked"); });

To make it easier, use a container

HTML example

 <div id="checks"> <input type="checkbox" id="chk1" /> <input type="checkbox" id="chk2" /> <input type="checkbox" id="chk3" /> <input type="checkbox" id="chk4" /> </div>

And for ratings, I prefer to set data on elements, for example:

 $("#chk1").data("Score", 3); $("#chk2").data("Score", 1); $("#chk3").data("Score", 2); $("#chk4").data("Score", 5); $("#checks :checkbox").change(function(e){ if ($(this).is(":checked")) alert("checked Score: " + $(this).data("Score")); else alert("not checked Score: " + $(this).data("Score")); });
+7
source share

I would recommend getting checkboxes in a more natural way ...

 $("input[type='checkbox']").change(function () { alert("Event is bound"); });

If you want to limit the use of these flags, you can add a class, although if you can avoid adding unnecessary classes, your html will be cleaner.

+2
source share

try using 'bind' and ': checked'

 $.each(checkboxes, function(key, value) { $(this).bind('change', function() { if ($(this).is(':checked')) { //do something when it is checked } else { //do something else } }); });
0
source share

More articles:


All Articles