jquery复选框更改事件答案

【问题标题】：jquery checkbox change eventjquery复选框更改事件
【发布时间】：2012-09-15 10:53:06
【问题描述】：

您好，我想知道是否存在可以由其他代码而不是用户触发的复选框事件...

例如

http://jsfiddle.net/DC3EH/

对于“全选”复选框，它还应自动切换“选定”类以切换行的背景颜色。

我已经尝试过“更改”和“点击”，但这只是由用户触发的。

我注释掉了一些代码...顺便说一句，我想要有很多复选框来切换某些类别的复选框，所以我想避免有很多 ".closest('tr').addClass('selected'); "等等

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

它似乎工作得很好：

http://jsfiddle.net/DC3EH/20/

我使用了 .change()

【讨论】：

【解决方案2】：

我不确定这是您需要的，但我认为所有<tr> 必须通过选中“全选”复选框更改为选中状态。试试这个http://jsfiddle.net/DC3EH/5/

【讨论】：

在完整版本中，某些行根据它们的属性被选中或取消选中......所以将使用最接近的（'tr'）......

【解决方案3】：

你试过触发点击事件吗？

.trigger("click") // for each checkbox

示例：http://jsfiddle.net/ELTRd/1/

【讨论】：

该组是“全选”复选框的反转版本...黄色行着色也反转...

【解决方案4】：

如果你绑定到 change 事件，你可以在 jquery 中触发 click 事件，它会检查复选框，然后触发 change 事件：

$(document).ready(function(){
    $('#check_all').click(function(event) {
        $('[name^="checkbox"]').trigger("click");
    });   

    $('[name^="checkbox"]').change(function(event) {
        console.log('a');
        if ($(this).is(":checked")) {
             $(this).closest('tr').addClass('selected');
        }
        else {
             $(this).closest('tr').removeClass('selected');
        }
    });    
});

更新小提琴：http://jsfiddle.net/DC3EH/19/

我切换到change事件而不是click事件的原因是jquery如何处理事件的触发。当您触发单击时，它将在更改复选框状态之前调用您的事件处理程序。绑定到更改可确保在状态更改之前不会调用您的事件。

【讨论】：

对我来说在 chrome 和 FF 中工作正常。
它似乎在 IE8 中不起作用。同样在 Chrome 和 FF 中，“全选”复选框只是反转当前选择...它应该根据“全选”复选框状态打开或关闭所有其他复选框。