jq实现全选和全不选
详细代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* 全选和全不选
*/
$("#checkAll").click(function() {
if(this.checked == true) {
$("input[name='subBox']").each(function() {
this.checked = true;
})
}
if(this.checked == false){
$('input[name="subBox"]').each(function(){
this.checked = false;
})
}
});
/**
* 显示选中的值
*/
$("#btn1").click(function(){
$('input[name="subBox"]:checked').each(function(){
// alert($(this).val())
alert(this.value)
})
})
});
</script>
</head>
<body>
<div>
<input id="checkAll" type="checkbox" value="111"/>全选<br />
<input name="subBox" type="checkbox" value="01"/>项1<br />
<input name="subBox" type="checkbox" value="02"/>项2<br />
<input name="subBox" type="checkbox" value="03"/>项3<br />
<input name="subBox" type="checkbox" value="04"/>项4<br />
<input name="subBox" type="checkbox" value="05"/>项5<br />
<input name="subBox" type="checkbox" value="06"/>项6<br />
</div>
<button id="btn1">提交</button>
</body>
</html>
效果图:
267CFC94-E868-4B8A-906D-A30F37CFF69D.GIF