1.点击全选,所有复选框选中
3.根据全选框的状态,切换label,flag
4.反选
上面是复选框的各种选项情况,
实现逻辑
一、.给全选框一个鼠标点击事件,把全选框的的状态给复选框
在这里要加上2,3情况的解决
二、反选选项,给反选一个鼠标点击事件,通过循环把复选框的状态进行切换
在这里要加上2,3这2种情况;
三、写一个函数解决2,3问题;
四、给每一个复选框加上鼠标事件,通过三来解决2问题
三的实现:
var isCheckAll = function () {
for (var i = 1, n = 0; i < oInput.length; i++) {
// oInput[i].checked && n++ /*可以这样写*/
if (oInput[i].checked) {
n++;
}
}
// oInput[0].checked = n == oInput.length - 1;/*可以这样写*/
if (n == oInput.length - 1) {
oInput[0].checked = true;
} else {
oInput[0].checked = false;
}
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
先通过循环,把复选框选中的个数用n记录下来,
判断,若n等于所有复选框的个数,则全选框的状态为true,然后同时根据条件表达式label的状态切换为全不选
贴上全部js代码:
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function () {
for (var i = 1, n = 0; i < oInput.length; i++) {
// oInput[i].checked && n++
if (oInput[i].checked) {
n++;
}
}
// oInput[0].checked = n == oInput.length - 1;
if (n == oInput.length - 1) {
oInput[0].checked = true;
} else {
oInput[0].checked = false;
}
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function () {
for (var i = 1; i < oInput.length; i++) {
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function () {
for (var i = 1; i < oInput.length; i++) {
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++) {
oInput[i].onclick = function () {
isCheckAll()
}
}
css3代码:
body,
dl,
dt,
dd,
p {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma;
font-size: 12px;
}
label,
input,
a {
vertical-align: middle;
}
label {
padding: 0 10px 0 5px;
}
a {
color: #09f;
text-decoration: none;
}
a:hover {
color: red;
}
dl {
width: 120px;
margin: 10px auto;
padding: 10px 5px;
border: 1px solid #666;
border-radius: 5px;
background: #fafafa;
}
dt {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
dt label {
font-weight: 700;
}
p {
margin-top: 10px;
}
vertical-align表示标签之间的对齐方式
html5代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框(checkbox)全选/全不选/返选</title>
<link rel="stylesheet" href="y.css">
</head>
<body>
<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
<dd>
<p>
<input type="checkbox" name="item" />
<label>选项(一)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(二)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(三)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(四)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(五)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(六)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(七)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(八)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(九)</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项(十)</label>
</p>
</dd>
</dl>
<center>1、切换全选/全不选文字;2、根据选中个数更新全选框状态;</center>
<script src="y.js"></script>
</body>
</html>