javascript - jQuery removeAttr 阻止重新添加属性

Question

我有一个复选框列表，我希望人们能够单独勾选这些复选框，或者批量勾选/取消勾选以便于使用。

<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>

批量勾选/取消勾选按钮的标记是:

<p>
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a>
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a>
</p>

JavaScript 是:

$("#tick-all").click(function () {
    $("input[type=checkbox]").attr('checked', 'checked');
});

$("#untick-all").click(function () {
    $("input[type=checkbox]").removeAttr('checked');
});

但是当我按顺序单击按钮:勾选、取消勾选、勾选时，它们只会在前两次起作用，之后，复选框将不会再次被勾选。

Answer 1

使用 prop() 而不是 attr

$("#tick-all").click(function () {
    $("input[type=checkbox]").prop('checked', true);
});

$("#untick-all").click(function () {
    $("input[type=checkbox]").prop('checked',false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label>
<p>
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a>
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a>
</p>