javascript - 未选中的复选框列表

Question

我有一个 checkbok 作为 selectAll

全选

<input class="all-select" type="checkbox" value="" name="">

我还有一个 friend 列表，每个 friend 都有一个动态填充的复选框。

<ul>
    <li><span><img src="img.src" ></span><strong>Name</strong>
        <br />Email
        <input name="" type="checkbox" value="" class="chk-box">
    </li>.....</ul>

当我单击全选复选框时，列表中的所有复选框都应被选中，其 JavaScript 代码如下:

$("#slide_top_pop").on("click", ".all-select", function (event) {
    if ($(this).is(':checked')) {
        $('input.chk-box').attr('checked', true);
    } else {
        $('input.chk-box').attr('checked', false);
    }
});

现在的问题是，当我第一次选择全选复选框时，列表会被选中，但是当我取消选中它并再次检查时，列表不会被选中，当我尝试在 Mozilla 上验证它时，列表是什么检查列表的属性(属性)然后我得到这个:

 <input class="chk-box" type="checkbox" value="" name="" checked="checked">

这表明该复选框已选中，但我在列表中看不到所选的勾号。我不明白问题是什么。任何解决方案表示感谢，谢谢。

Answer 1

使用.prop()而不是 .attr() 像:

$("#slide_top_pop").on("click", ".all-select", function (e) {
    $('input.chk-box').prop('checked', this.checked);
});