<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选</title>
<style>
#myCheck1 + label{
background-color: white;
border-radius: 5px;
border:1px solid #dbdbdb;
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: text-top;
margin-left: -22px;
line-height: 20px;
}
#myCheck1:checked + label:after{
content: "2714";
color: #8bbd26;
border: 1px solid #8bbd26;
background-color: white;
border-radius: 5px;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
margin-left: -1px;
line-height: 20px;
}
</style>
</head>
<body>
全选<input type="checkbox" id="myCheck1">
<label for="myCheck1"></label>
<div id="list">
<input type="checkbox" name="" value=""><span>选项一</span>
<input type="checkbox" name="" value=""><span>选项二</span>
<input type="checkbox" name="" value=""><span>选项三</span>
<input type="checkbox" name="" value=""><span>选项四</span>
</div>
</body>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
var all = document.getElementById("myCheck1");
var tbody = document.getElementById("list");
var checkboxs = tbody.getElementsByTagName("input");
all.onclick = function() {
for (var i = 0; i < checkboxs.length; i++) {
var checkbox = checkboxs[i];
checkbox.checked = this.checked;
}
};
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].onclick = function() {
var isCheckedAll = true;
for (var i = 0; i < checkboxs.length; i++) {
if (!checkboxs[i].checked) {
isCheckedAll = false;
break;
}
}
all.checked = isCheckedAll;
};
}
</script>
</html>
