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

但是，當我按以下順序單擊按鈕時： tick, untick, tick ，那么它們將僅在前兩次工作，之后，復選框將不會再次被選中。

Answer 1

采用

$("input[type=checkbox]").attr('checked', true);
$("input[type=checkbox]").attr('checked', false);

要么

$("input[type=checkbox]").prop('checked', true);
$("input[type=checkbox]").prop('checked', false);

Answer 2

使用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> 

Answer 3

用戶Jquery Prop方法如下

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

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