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