您的位置：首页 > Web前端 > JQuery

jQuery复选框-全选、全不选

2016-08-14 20:36 211 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>练习-复选框</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei";
text-align: center;
}
#mainDiv {
width: 100%;
text-align: center;
margin-top:10px;
}
</style>

<script type="text/javascript">
/*
To retrieve and change DOM properties
such as the checked, selected, or disabled state of form elements,
use the .prop() method.
根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，
其他的使用 attr()
*/

$(document).ready(function(){
//1. 全选/全不选
$("#all").click(function(){
//分析： 子复选框状态，与父复选框状态一致
// 1.1 获取当前复选框状态
var flag = this.checked;  // this 是dom元素
// 1.2 选取子复选框，设置状态（父复选框状态）
//$(":checkbox[name='course']").attr("checked",flag);
$(":checkbox[name='course']").prop("checked",flag);
});

//2. 反选
$("#btn1").click(function(){
$(":checkbox[name='course']").each(function(){
//2.1 获取当前选中状态
var flag = $(this).prop("checked");
//2.2 反选
$(this).prop("checked", !flag);
});

clickCourse();
});
//3.将选中的设置为没有选中
$("#btn2").click(function(){
$(":checkbox[name='course']:checked").each(function(){
//this.checked = false;
$(this).prop("checked", false);
});

clickCourse();
});

//4. 将没有选中的设置为选中
$("#btn3").click(function(){
$(":checkbox[name='course']:not(:checked)").each(function(){
//this.checked = true;
$(this).prop("checked", true);
});

clickCourse();
});

//5. 给子复选框添加事件
// 当选中的子复选框长度 == 子复选框总长度， 父复选框选中；
// 否则，父复选框取消选中
$(":checkbox[name='course']").click(clickCourse);

// 点击每一个自复选框，判断是否选择父复选框
function clickCourse(){
if ($(":checkbox[name='course']:checked").length == $(":checkbox[name='course']").length) {
$("#all").prop("checked",true);
}else{
$("#all").prop("checked",false);
}
}
});
</script>
</head>

<body>
<div id="mainDiv">
<p>itcast学科选择：<input type="checkbox" name="courseAll" id="all"><label for="all">全选/全不选</label></p>
<input type="checkbox" name="course" value="Java" id="java" >
<label for="java">Java</label>
<input type="checkbox" name="course" value="IOS" id="ios" >
<label for="ios">IOS</label>
<input type="checkbox" name="course" value="Android" id="android" >
<label for="android">Android</label>
<input type="checkbox" name="course" value=".Net" id="net" >
<label for="net">.Net</label>
<input type="checkbox" name="course" value="PHP" id="php" >
<label for="php">PHP</label>
<input type="checkbox" name="course" value="网页平面" id="ui" >
<label for="ui">网页平面</label>
</div>
<br><br>
<hr>
<input type="button" id="btn1" value="反选">
<input type="button" id="btn2" value="将选中的设置为没有选中">
<input type="button" id="btn3" value="将没有选中的设置为选中">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航