29

我有这个Check All功能可以检查所有复选框。我使用 JQuery 来做到这一点。

但我也有这个on change函数可以将一个类切换到包装器 div：

$('input[type="checkbox"]').on('change', function(){
    $(this).closest('div').toggleClass('highlight');
});

该功能在我单击复选框时运行，但在我单击时不会运行Check all。

有没有办法使用 JQuery 手动触发事件？还是有更好的解决方案？

谢谢

编辑：

这是简化的 HTML：

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC<br>
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR<br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ<br>
</div>

这是 JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

4

5 回答 5

51

单击检查后，您应该像这样调用 change() 事件

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true).change();
    });
});
于 2013-06-03T08:11:43.850 回答
3

这将触发change事件，但前提是您先绑定它。

$('input[type="checkbox]').trigger('change');
于 2013-06-03T08:09:00.823 回答
0

检查您的代码的这个小提琴修改：http: //jsfiddle.net/d4VTh/51/

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        if (this.checked)
            $(this).closest('div').addClass('highlight');
        else 
            $(this).closest('div').removeClass('highlight');
    });

    $("#check_all").on('click', function(){
        var item = $("input[type='checkbox']")
        item.prop('checked', !item.prop('checked')).change();
    });
});
于 2014-06-30T14:55:43.380 回答
0

几乎与 visnu 的答案相同，但直接调用 click() 将触发 jQuery 绑定的所有点击事件。如果您对此进行演示，您将看到它也取消选中这些框，而他的回答只是在它们保持单击时删除了突出显示。

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").click();
    });
});
于 2014-06-06T15:48:04.087 回答
0

你可以试试这个

$(document).on('change','input[type="checkbox]' ,function(){
     // $this will contain a reference to the checkbox
      var $this = $(this);   
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT
         $(this).closest('div').toggleClass('highlight');
    }
});

希望能帮助到你，

于 2013-06-03T08:08:26.747 回答