checkbox全选、全不选、反选

时间:2022-02-14 10:45:27

第一次写博客,这边简单的记录下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解决办法