我有一个复选框列表,我希望人们能够单独勾选这些复选框,或者批量勾选/取消勾选以便于使用。
<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');
});
但是当我按顺序单击按钮:勾选、取消勾选、勾选
时,它们只会在前两次起作用,之后,复选框将不会再次被勾选。
最佳答案
使用 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>
关于javascript - jQuery removeAttr 阻止重新添加属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38850344/