Question

我有以下代码导致问题...，我使用stackoverflow本身的现有代码，但我不知道是什么导致它中断，我可以看到警报，但我无法做到检查全部/取消选中所有功能，可能是我在这里遗漏了一些东西

这是我的代码：

<input type="checkbox" name="checkall" id="checkallmails" class="mail-checkbox mail-group-checkbox">

<input type="checkbox" title="inbox_mails" id="9" name="inboxmails" class="mail-checkbox">
<input type="checkbox" title="inbox_mails" id="10" name="inboxmails" class="mail-checkbox">
<input type="checkbox" title="inbox_mails" id="11" name="inboxmails" class="mail-checkbox">
<input type="checkbox" title="inbox_mails" id="12" name="inboxmails" class="mail-checkbox">


$(document).on("#checkallmails","click", function() {
        var alls = $(this);
        console.log(alls);
        $('input:checkbox').each(function() {
            $(this).prop("checked", alls.prop("checked"));
        });
    });

以上不起作用......

Answer 1

对于event delegation，语法应为：

.on( events [, selector ] [, data ], handler )

变化：

$(document).on("#checkallmails","click", function() {

要：

$(document).on("click", "#checkallmails", function() {

但它似乎不需要委托事件，也不需要each调用，prop在幕后迭代整个集合：

$('#checkallmails').on("change", function() {
   $('input:checkbox.mail-checkbox').prop("checked", this.checked);
});

Answer 2

更正jQuery代码 -

$('#checkallmails').on("click", function() {
        var alls = $(this);
        console.log(alls);
        $('input:checkbox').each(function() {
            $(this).prop("checked", alls.prop("checked"));
        });
    });

工作小提琴 - http://jsfiddle.net/Ashish_developer/ss2uv8rb/

此外，您的问题中的代码段不需要“on”，因为没有任何元素动态生成。你可以简单地使用 -

$('#checkallmails').click(function() {
//your code
});

检查这个小提琴 - http://jsfiddle.net/Ashish_developer/gL5dg6ut/

Answer 3

除on()实施中的错误外，您可以将其简化为

//use event delegation only if it is necessory
//also use change event
$(document).on("change", "#checkallmails", function() {
  $('input[type="checkbox"]').not(this).prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkall" id="checkallmails" class="mail-checkbox mail-group-checkbox" />
<input type="checkbox" title="inbox_mails" id="9" name="inboxmails" class="mail-checkbox" />
<input type="checkbox" title="inbox_mails" id="10" name="inboxmails" class="mail-checkbox" />
<input type="checkbox" title="inbox_mails" id="11" name="inboxmails" class="mail-checkbox" />
<input type="checkbox" title="inbox_mails" id="12" name="inboxmails" class="mail-checkbox" />

Answer 4

我不确定为什么我们使用循环？使用不必要的循环很糟糕，因为它会使代码非常繁重。

这是我的代码，非常简单，重量轻

JS：

$(document).on("click","#checkallmails", function() {
        var alls = $(this);
        console.log(alls);
        $('input:checkbox').prop("checked", alls.prop("checked"));
    });

请参阅示例：http://jsfiddle.net/asadalikanwal/exgby2pf/1/

检查并取消选中不在jquery中工作

4 个答案: