对checkbox操作时用prop而非attr。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body>
<p> 运动多选框 </p>
你爱好的运动是?
<input type="checkbox" name="checkall" value="0">全选/全不选<br>
<input type="checkbox" name="test" value="足球">足球
<input type="checkbox" name="test" value="篮球">篮球
<input type="checkbox" name="test" value="羽毛球">羽毛球
<input type="checkbox" name="test" value="乒乓球">乒乓球<br>
<button name ="sela" onclick="selectall()">全选 </button>
<button name ="seln" onclick="selectallnot()">全不选 </button>
<button name ="selrev" onclick="selectopposite()">反选 </button>
<button name ="check" onclick="displayResult()">提交 </button>
<script>
$('input[name ="checkall"]').on("click",function(){ //全选/全不选
if($(this).is(':checked')){
$('input[name="test"]').each(function(){
$(this).prop("checked",true);
});
} else {
$('input[name="test"]').each(function(){
$(this).prop("checked",false);
});
}
});
$("button[name=sela]").click(function(){ //全选
$("input:checkbox,test").each(function(){
$(this).prop("checked",true);
});
});
$("button[name=seln]").click(function(){ //全不选
$("input:checkbox,test").each(function(){
$(this).prop("checked",false);
});
});
$("button[name=selrev]").click(function(){ //反选
$("input:checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
checkSelect();
});
$("button[name=check]").click(function(){ //提交
var show = new Array;
var len=$("input:checkbox:checked").length>4?4:$("input:checkbox:checked").length;
$("input:checkbox:checked").each(function(i){
show[i] = $(this).val();
});
var show = show.join(',');
alert(show);
});
function checkSelect(){
var chknum=4;
var chk=0;
$("input:checkbox").each(function () {
if($(this).attr("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$('input[name="checkall"]').prop("checked",true);
}else{//不全选
$('input[name="checkall"]').prop("checked",false);
}
}
</script>
</body>
</html>