如何检查复选框（就像手动检查一样）

Question

我有一个复选框列表（具有checkbox 类）。不同的任务分配给不同的复选框。单击一个复选框执行某些操作，单击另一个复选框执行其他操作。

现在我想制作一个复选框，将所有复选框（类checkbox）标记为已选中。 所以我创建了一个新的复选框并使用以下代码标记所有其他复选框

$(".checkbox").prop('checked', true);

它确实标记了我所有的复选框，但问题是它没有启动与这些复选框相关的事件和功能。

怎么做？

这是完整的代码

$("#check_all").change(function(){

    //If it was checked
    if($(this).prop('checked') == true){
        $(".checkbox").prop('checked', true);           
    }

    //If it was unchecked
    else {
        $(".checkbox").prop('checked', false);
    }
});

Answer 1

一个简单的方法来做你需要做的事情是这样的：

$('#checkAll').on('click', function()
{
    var all;
    if (this.checked)
        all = $('.checkbox').not(':checked');
    else
        all = $('.checkbox:checked');
    all.prop('checked',this.checked);
});

它有效，如您所见on this fiddle

它的工作原理很简单：

this.checked 告诉我 "check all" 元素的检查状态是什么。如果选中，则其他未选中的复选框应更改状态。如果this.checked 为假，我必须取消选中所有选中的复选框。
这意味着我必须使用 2 种不同的选择方法：$('.checkbox:checked') 给我所有选中的元素，而$('.checkbox').not(':checked') 给我相反的选择。

我通过简单地将主控件 ($('#checkAll')) 元素的检查状态传递给 $.prop 方法来更新所选元素：

Answer 2

可以触发click事件：

$("#check_all").change(function(){
    $(".checkbox")
       .prop('checked', !$(this).prop('checked'))
       .trigger('click');
});

JSFiddle