全选功能
2018-03-19 本文已影响0人
jiaomeichen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery实现全选非全选</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
input {vertical-align: middle}
.container {width: 500px;margin: 20px auto;}
</style>
</head>
<body>
<div class="container">
<div class="top">
<input type="checkbox" value="全选" id="all" class="all" />
<label for="all">全选</label>
</div>
<div class="down">
<div class="con">
<input type="checkbox" id="sel1" class="sel sel1" />
<label>选项1</label>
</div>
<div class="con">
<input type="checkbox" id="sel2" class="sel sel2" />
<label>选项2</label>
</div>
<div class="con">
<input type="checkbox" id="sel3" class="sel sel3" />
<label>选项3</label>
</div>
</div>
</div>
<script>
$(".all").on("click",function() {
$(".sel").prop("checked", $(this).prop("checked"));
});
$(".sel").on("click",function() {
var $sel = $(".sel");
var b = true;
for(var i = 0; i < $sel.length; i++) {
if($sel[i].checked == false) {
b = false;
break;
}
}
$(".all").prop("checked", b);
})
</script>
</body>
</html>
