<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>6-5:复选框全选反选-2</title>
<style>
form{
width:300px;
margin: 0 auto;
}
</style>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="send" value="显示选中元素"/>
</form>
<script>
$(function () {
//全选/全不选
$("#CheckedAll").click(function () {
$('input[name="items"]').prop("checked",this.checked);
})
//每个选项的点集事件
$('input[name="items"]').click(function () {
var flag=true;
$('input[name="items"]').each(function () {
if(!this.checked){
flag=false;
}
})
if(flag){
$("#CheckedAll").prop("checked",true);
}else{
$("#CheckedAll").prop("checked",false);
}
})
//显示选中元素
$("#send").click(function () {
var str="你选中的是:\r\n";
$("input:checkbox:checked").each(function () {
str += $(this).val()+"\r\n";
})
alert(str);
})
})
</script>
</body>
</html>
jquery实现全选、全不选效果-2
最新推荐文章于 2023-05-24 12:38:44 发布