全选、全不选练习
下面展示一些 内联代码片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//全选
$("#checallbtn").click(function(){
$(":checkbox").prop("checked",true);
});
//全不选
$("#checnonebtn").click(function(){
$(":checkbox").prop("checked",false);
});
//反选
$("#checreve").click(function(){
//查询全部球类的复选框
$(":checkbox[name='items']").each(function(){
this.checked=!this.checked;
});
//检查是否全满，若全满，则全选框也要被选择
var allCount=$(":checkbox[name='items']").length;
var checkCount = $(":checkbox[name='items']:checked").length;
$("#chexall").prop("checked",allCount==checkCount);
});
//提交
$("#submit").click(function(){
//获取选中球类的复选框
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//给全选/全不选添加事件
$("#chexall").click(function(){
$(":checkbox[name='items']").prop("checked",this.checked);
});
//给每个球类绑定单击事件
$(":checkbox[name='items']").click(function(){
var allCount=$(":checkbox[name='items']").length;
var checkCount = $(":checkbox[name='items']:checked").length;
$("#chexall").prop("checked",allCount==checkCount);
});
});
</script>
</head>
<body>
<form action="" method="">
你爱好的运动是：<input type="checkbox" name="" id="chexall" />全选/全不选
<br>
<input type="checkbox" name="items" id="" value="足球" />足球
<input type="checkbox" name="items" id="" value="篮球" />篮球
<input type="checkbox" name="items" id="" value="羽毛球" />羽毛球
<input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
<br>
<input type="button" name="" id="checallbtn" value="全 选" />
<input type="button" name="" id="checnonebtn" value="全不选" />
<input type="button" name="" id="checreve" value="反 选" />
<input type="button" name="" id="submit" value="提 交" />
</form>
</body>
</html>
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
