切换复选框仅选中，不取消选中

Question

I am trying to toggle some checkboxes using jQuery and I am using code that is recommended often when searching for toggling checkboxes, but it only seems to check them instead of toggling.

Here's a jsfiddle for it:

http://jsfiddle.net/wgHpG/

The HTML:

<button id="priority-categories" class="btn">Priority</button>

<input type="checkbox" name="category" value="1" id="1">
<input type="checkbox" name="category" value="2" id="2">
<input type="checkbox" name="category" value="3" id="3">​

The js:

$('#priority-categories').click(function(){

    var categories = [1, 3];

    $.each(categories, function(key, value) {
        $('#' + value).prop('checked', !$('#' + value).checked);
    });
});

Answer 1

.checked is not a property of the jquery object representing the checkbox element.

Use .is(':checked') instead

http://jsfiddle.net/wgHpG/1/

Answer 2

jQuery objects don't have a .checked property, only DOM elements have it.
$('#' + value).checked will always be undefined , and hence !$(..).checked will always be true .

You can pass a callback to .prop :

$('#' + value).prop('checked', function(i, checked) {
    return !checked;
});

---

Note that IDs starting with numbers are not valid in HTML4.

Answer 3

jQuery elements don't have a 'checked' property. You need to either use a jQuery method to check if it is checked or convert it back into a DOM element

!$('#' + value)[0].checked

or

!$('#' + value).prop('checked')

Answer 4

改成

$('#' + value).prop('checked', !$('#' + value).is(":checked"));

Answer 5

 $('#' + value).prop('checked', !$('#' + value).attr("checked"))

Answer 6

This code, while a little verbose, will toggle as you expect - http://jsfiddle.net/wgHpG/2/

$('#priority-categories').click(function(){

    var categories = [1, 3];

    $.each(categories, function(key, value) {
        if($('#'+value).is(':checked')) {
            $('#' + value).prop('checked', false);
        } else {
            $('#' + value).prop('checked', true);
        }
    });
});

Answer 7

A slightly different approach might be to use jQuery to select the nodes then just toggle on the native DOM checkbox:

var categories = [1, 3];

$('#' + categories.join(',#')).each(function() {
   this.checked = !this.checked;
});