jQuery 复选框改变事件

Question

嗨，我想知道是否有一个与复选框相关的事件可以被其他代码触发，而不是由用户触发...

例如：

http://jsfiddle.net/DC3EH/

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

我尝试了“change”和“click”，但这些只能由用户触发。

我注释掉了一些代码...顺便说一下，我想要有很多复选框来切换某些复选框的类，所以我想避免使用大量的“.closest('tr').addClass('selected');”等代码。

- Luke Wenke

Answer 1

看起来它完美地工作：

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

我使用了 .change()。

- Luke Wenke

Answer 2

如果您绑定了更改事件，可以在jQuery中触发单击事件，这将检查复选框并进而触发更改事件：

$(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');
        }
    });    
});​

更新的Fiddle: http://jsfiddle.net/DC3EH/19/

我之所以改用change事件而不是click事件，是因为jquery处理事件触发的方式。当你触发click事件时，它会在改变复选框状态之前调用你的事件处理程序。绑定到change可以确保在状态更改后才调用你的事件。

- John Koerner

---

在我的Chrome和FF浏览器上运行良好。 - John Koerner

它似乎在IE8中无法正常工作。此外，在Chrome和FF中，“全选”复选框只会反转当前选择...它应该根据“全选”复选框的状态打开或关闭所有其他复选框。 - Luke Wenke

Answer 3

我不确定这是否是您需要的，但我的想法是所有的<tr>必须通过选中“全选”复选框来更改为已选择。请尝试这个http://jsfiddle.net/DC3EH/5/

- Mohamed Farrag

---

在完整版本中，某些行根据其属性被选中或取消选中...因此会使用closest('tr')... - Luke Wenke

Answer 4

你尝试过触发点击事件吗？

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

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

- Mark

---

该组是“全选”复选框的反转版本...同时黄色行着色也被反转了... - Luke Wenke