打开/关闭复选框

Question

我有以下内容:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

我希望id="select-all-teammembers"点击时可以在已选中和未选中之间切换.想法？这不是几十行代码？

Answer 1

你可以写:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

在jQuery 1.6之前,当我们只有attr()而不是prop()时,我们曾经写过:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

但是prop()具有比attr()应用于"布尔"HTML属性时更好的语义,因此在这种情况下通常是首选.

Answer 2

//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Answer 3

我知道这是旧的,但问题有点模糊,因为切换可能意味着每个复选框都应切换其状态,无论是什么.如果您有3个已选中且2未选中,则切换将使前3个未选中,最后2个选中.

为此,这里的解决方案都不起作用,因为它们使所有复选框具有相同的状态,而不是切换每个复选框的状态.这样做$(':checkbox').prop('checked')在很多复选框返回逻辑和所有之间的.checked二元性,即如果其中一人被选中时,返回的值是false.

.each()如果你想实际切换每个复选框状态而不是使它们全部相等,你需要使用,例如

   $(':checkbox').each(function () { this.checked = !this.checked; });

请注意,您不需要$(this)在处理程序内部,因为该.checked属性存在于所有浏览器中.

Answer 4

这是你想要的另一种方式.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

Answer 5

我认为触发点击更简单:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

Answer 6

从jQuery 1.6开始,您可以使用.prop(function)切换每个找到的元素的已检查状态:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

Answer 7

我能想到的最佳方式.

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

要么

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

要么

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

Answer 8

使用这个插件:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

然后

$('#myCheckBox').toggleCheck();