JQuery - 当使用JQuery选中复选框时，复选框的on-change事件不会触发

Question

我有一个名为Check All的功能，用于勾选所有复选框。我使用JQuery来实现这个功能。

但是我还有一个名为on change的功能，它会在包装器div上切换一个类：

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

当我点击复选框时，该函数运行，但如果我点击“全选”则不运行。

有没有办法使用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/

- hrsetyono

---

你可以使用触发器，或者在这里发布更多的代码，这样我/我们就可以提供更多帮助。 - Vond Ritz

你怎么知道函数没有运行？你用调试器检查过了吗？ - Andrei

@Andrei 我已经使用 console.log() 进行了检查，它只在我直接点击复选框时运行。 @all 等一下，我会创建 JSFiddle。 - hrsetyono

@BeNdErR，我已经添加了 JSFiddle。抱歉。 - hrsetyono

Answer 1

点击全选后，您应该像这样调用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();
    });
});

- visnu

---

抱歉，我重写了代码以简化它。实际上并没有语法错误。 - hrsetyono

抱歉，那不是我想表达的意思。你可以查看我刚创建的这个 JSFiddle。 - hrsetyono

太完美了！只需要一个单词就可以运行！非常感谢您，先生！ - hrsetyono

或者你可以使用以下代码：$("input[type='checkbox']").click();这将取消选中复选框（而本答案则保持它们被选中但未高亮）。 - Andrew

Answer 2

这将触发change事件，但只有在您先绑定它后才会触发。

$('input[type="checkbox]').trigger('change');

- woutr_be

---

我对JQuery还很新手，所以不确定什么是binding。稍后我会去看一下。但是这次，visnu的答案很好用。 - hrsetyono

@DarcCode，当你使用.on()时，你正在将一个事件绑定或附加到一个元素上。 - woutr_be

那么，既然我使用了 on()，这是否意味着我的代码已经绑定了？ - hrsetyono

@DarcCode 没错，但是只有在绑定之后才能使用 trigger，否则它不会触发任何事件。 - woutr_be

Answer 3

请查看您代码的这个 fiddle 修改版：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();
    });
});

- Seo

Answer 4

你可以尝试这个，

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

希望能有所帮助，

- Farhan

---

谢谢您的时间，但这个不起作用。您可以查看Visnu的答案，那个是完美的。 - hrsetyono

Answer 5

几乎与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();
    });
});

- Andrew