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

您可以触发click事件：

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

JSFiddle

Answer 2

执行您需要做的事情的简单方法是：

$('#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告诉我＆＃34;检查所有＆＃34; 元素的检查状态是什么。如果已选中，则未检查的其他复选框应更改状态。如果this.checked为false，我必须取消选中所有选中的复选框这意味着我必须使用2种不同的选择方法：$('.checkbox:checked')为我提供所有选中的元素，而$('.checkbox').not(':checked')则为我提供相应的选择。

我只需将master controle（$('#checkAll')）元素的检查状态传递给$.prop方法即可更新所选元素：

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

2 个答案: