jQuery的checkbox，全选反选以及显示值功能

对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>
jQuery的checkbox，全选反选以及显示值功能

猜你喜欢
