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进行游戏

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

用户Jquery Prop方法如下

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

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

jQuery removeAttr阻止重新添加属性

3 个答案: