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

與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 2

使用

$("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 3

用戶jQuery的道具方法像下面

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

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