Jquery: Binding change to multiple checkboxes
For a little bit of background, I have multiple checkboxes, each weighted with a different "score". When the checkbox is changed, I need to compute the score. I thought something like the following would work but it does not look like the .change event is being bound properly.
$(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开发者_JAVA百科')) {
//add this ids value to score
} else {
//subtract value from score
}
});
});
}
I know that it is looping through the array correctly, but an alert in .change is never being seen.
I recommend you to add a container and select all checkboxes at once.
And as for your question, the signature of the event is wrong, the correct is function(e){}
. Also, you have to check if the element is checked, and not clicked.
$("#chk").change(function(e){
if ($(this).is(":checked"))
alert("checked");
else
alert("not checked");
});
To make it easier, use a container
Sample HTML
<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 the scores, I prefer to set data on the elements, 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"));
});
- See this example on jsFiddle.
- jQuery change event
- :checked selector
- .data
If you really wanted to take that approach of using IDs, I'd make a separate Array of the ID's, and do a .join()
to create the selector.
Some things to note:
- Instead of
.is(':clicked')
or.is(':checked')
, usethis.checked
. Much more efficient. - Event handlers in jQuery have one parameter that refers to the
event
. You have 2 forkey,value
. This is makingkey
in the handler refer to thatevent
object instead of thekey
from the$.each()
. - Inside a handler,
this
refers to the one that was clicked. - Because you have
this
reference to the element, you don't need the reference tokey
in the$.each()
. You can just dothis.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
}
});
}
I would recommend obtaining the checkboxes in a more natural way...
$("input[type='checkbox']").change(function () {
alert("Event is bound");
});
If you want to restrict which checkboxes to use, you could add a class, although if you can avoid adding unnecessary classes, your html will be cleaner.
try use '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
}
});
});
精彩评论