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

Question

我正在尝试使用 jQuery 切换一些复选框，并且我正在使用在搜索切换复选框时经常推荐的代码，但它似乎只检查它们而不是切换。

这是一个jsfiddle：

http://jsfiddle.net/wgHpG/

的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">​

js：

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

    var categories = [1, 3];

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

Answer 1

.checked不是表示复选框元素的 jquery 对象的属性。

.is(':checked')改为使用

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

Answer 2

jQuery 对象没有.checked属性，只有 DOM 元素有。
$('#' + value).checked将永远是undefined，因此!$(..).checked永远是true。

您可以将回调传递给.prop：

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

---

请注意，以数字开头的 ID 在 HTML4 中无效。

Answer 3

jQuery 元素没有“已检查”属性。您需要使用 jQuery 方法检查是否已检查或将其转换回 DOM 元素

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

或者

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

Answer 4

改成

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

Answer 5

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

Answer 6

这段代码虽然有点冗长，但会按照您的预期切换 - 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

稍微不同的方法可能是使用 jQuery 来选择节点，然后只需打开本机 DOM 复选框：

var categories = [1, 3];

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