通过JQuery检查/取消选中复选框的麻烦

时间:2013-10-09 01:38:33

标签: jquery html checkbox

Here is a JSFiddle我的问题。

注意我正在使用JQuery 2.0.2。

我正在使用JQuery复选框树插件,当我手动点击Subgroup B2中的每个元素时,Subgroup B2也会被检查。相反,如果我手动取消选中其中一个孩子,Subgroup B2将进入“部分选择”状态,取消选中所有孩子将完全取消选中Subgroup B2。这很有效并且符合预期。

但请注意顶部的按钮。

我正试图通过代码触发这些点击事件。

第一个按钮会触发标签上的click事件(当您手动单击框/文本时,会点击该事件)。正如您将注意到的,它会检查所有框,但Subgroup B2仍然只是部分选中。

再次单击该按钮应该再次关闭复选框,但事实并非如此。这就是按钮2的用途。出于某种原因取消选中按钮,您需要单击与选中复选框所需的元素不同的元素。这对我来说毫无意义。

最后,如果你混合互动(实际点击和编码点击),事情就会开始变得更加分崩离析。

我一直在研究这个问题好几个小时,而且互动时有问题,它来自复选框。

我如何获得复选框以尊重我的编码点击次数,就像我手动点击一样?

1 个答案:

答案 0 :(得分:2)

我相信按钮的问题来自触发事件冒泡DOM,您可以使用triggerHandler()代替trigger()来避免这种情况,只需注意此方法仅影响第一个匹配的元素所以你需要在循环中使用它:

$("#trigChildren").on('click', function () {
    $('#one, #two, #three').each(function () {
        $(this).parent().triggerHandler('click');
    });
});

<强> Updated fiddle