本文将简单介绍如何通过JavaScript实现Checkbox的全选与反选功能，包括代码实现和逻辑解析。
第一次写博客，这边简单的记录下checkbox常见的勾选代码：
//全选、全不选
function selectAll() {
if ($("#selectAll").attr("checked")) {
$("input[name='selectbody']").attr("checked", true);
} else {
$("input[name='selectbody']").attr("checked", false);
}
}
//选中反选
function selectThis(obj) {
var flag = false;
if ($(obj).attr("checked") != "checked") {
flag = false;
} else {
flag = true;
$("input[name='selectbody']").each(function() {
if ($(this).attr("checked") != "checked") {
flag = false;
}
})
}
if (flag) {
$("#selectAll").attr("checked", true);
} else {
$("#selectAll").attr("checked", false);
}
}<body>
<input type="checkbox" name="selectAll" id="selectAll" onclick="selectAll()">全选/全不选</input><br/>
<input type="checkbox" name="selectbody" onclick="selectThis(this)" value="足球">足球 </input><br/>
<input type="checkbox" name="selectbody" onclick="selectThis(this)" value="轮滑">轮滑 </input><br/>
<input type="checkbox" name="selectbody" onclick="selectThis(this)" value="乒乓">乒乓 </input><br/>
</body>
如上代码，判断用到的是“checked”，这是因为jQ1.6后的版本默认的判断不是true和false了，改为checked和undifined；
当然jQ1.6后的版本引入了prop，原理同之前的attr，可以使用ture和false判断。
关于attr和prop，参考： $('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
