复选框的应用

最新推荐文章于 2019-08-25 19:43:09 发布

weixin_30606669

最新推荐文章于 2019-08-25 19:43:09 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjing-blog/p/6698721.html

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<form>
你的爱好是做什么？
<input type="checkbox" name="" id="checkAll" value="全选/全不选">全选/全不选<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" name="" id="send" value="提交">
</form>
<script type="text/javascript">
$(function(){
$("#checkAll").click(function() {
// $("[name=items]:checkbox").prop('checked', this.checked)
if(!this.checked){
$("[name=items]:checkbox").prop('checked',false);
}else{
$("[name=items]:checkbox").prop('checked',true);
}
});
// 方法1
$("[name=items]:checkbox").click(function() {
var flag=true;
$("[name=items]:checkbox").each(function() {
if(!this.checked){
flag=false;//循环复选框组，当没有被选中的项时，则把变量flag的值设置为flase;
}
});
alert(flag);
$("#checkAll").prop('checked', flag);
});
//方法二：判断复选框的总数是否与选中复选框数量相等
// $("[name=items]:checkbox").click(function() {
// var $tmp=$("[name=items]:checkbox");
// $("#checkAll").attr('checked', $tmp.length==$tmp.filter(":checked").length);
// });
})
</script>

</body>
</html>

转载于:https://www.cnblogs.com/linjing-blog/p/6698721.html

weixin_30606669

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框的应用

<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script></head><body> <form> ...
复制链接

扫一扫