JQuery - 如果使用 JQuery 进行检查，复选框更改事件不会触发答案

【问题标题】：JQuery - Checkbox on-change event doesn't fire if checked using JQueryJQuery - 如果使用 JQuery 进行检查，复选框更改事件不会触发
【发布时间】：2014-06-30 22:55:43
【问题描述】：

我有这个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/

【问题讨论】：

你可以使用触发器或者你可以在这里发布更多你的代码，所以我/我们可以帮助你更多。
你怎么知道函数没有运行？你检查过调试器吗？
@Andrei 我已经使用console.log() 进行了检查，它仅在我直接单击复选框时运行。 @all 等等，我将创建 JSFiddle
@BeNdErR 我已经添加了 JSFiddle。对不起

标签： jquery html

【解决方案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();
    });
});

【讨论】：

对不起，我重写了代码以简化它。它实际上没有语法错误。
抱歉，我不是这个意思。你可以查看这个JSFiddle我刚刚创建的
完美！一个字就行！非常感谢您的好先生！
或者你可以做$("input[type='checkbox']").click(); 这也会取消选中你的复选框（而这个答案让它们保持选中状态但不突出显示它们。）

【解决方案2】：

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

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

【讨论】：

我对 JQuery 很陌生，所以我不确定什么是绑定的。我稍后会看看。但是这次，visnu 的回答很好。
@DarcCode，当您使用.on() 时，您将事件绑定或附加到元素
那么既然我用on()，是不是说明我的代码已经绑定了？
@DarcCode 没错，但是trigger绑定后只能使用，否则不会触发任何东西。

【解决方案3】：

你可以试试这个，

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

希望对你有帮助，

【讨论】：

感谢您抽出宝贵时间，但他的那个不起作用。您可以查看 visnu 的完美答案。

【解决方案4】：

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

【讨论】：

【解决方案5】：

检查您的代码的这个小提琴修改：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();
    });
});

【讨论】：