练习地址:http://www.fgm.cc/learn/lesson2/12.html
实现要点:
- 判断checkbox是否被选中:box.checked,是的话返回true;否则false
- 全选:循环设置每个checkbox.checked = true;文本innerText = “全不选”
- 全不选:上述反向
- 反选:循环+if判断该checkbox是否被选中,如果选中设置为false,反之
这个思路写的代码其实很累赘,看了源代码,比较简单,后面也贴出来。
下面是我写的:
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>复选框(checkbox)全选/全不选/反选</title>
<link rel="stylesheet" type="text/css" href="12_inverse.css">
</head>
<body>
<div id="container">
<input type="checkbox"><strong>全选</strong>
<p>反选</p>
<hr>
<input type="checkbox">选项(一)
<input type="checkbox">选项(二)
<input type="checkbox">选项(三)
<input type="checkbox">选项(四)
<input type="checkbox">选项(五)
<input type="checkbox">选项(六)
<input type="checkbox">选项(七)
<input type="checkbox">选项(八)
<input type="checkbox">选项(九)
<input type="checkbox">选项(十)
</div>
<p id="instruction">1、切换全选/全不选文字;2、根据选中个数更新全选框状态;</p>
<script type="text/javascript" src="12_inverse.js"></script>
</body>
</html>
CSS
#container {
width: 130px;
margin: 0 auto;
border: 1px solid gray;
font-size: 14px;
padding: 7px 10px;
background: lightgray;
}
input {
margin: 7px 10px;
}
p {
position: absolute;
top: 7px;
right: 635px;
color: blue;
}
p:hover {
color: red;
cursor: pointer;
}
#instruction {
color: gray;
font-size: 12px;
position: absolute;
top: 330px;
right: 530px;
}
JavaScript
window.onload = function() {
var allSelect = document.getElementsByTagName("input")[0];
var change = document.getElementsByTagName("strong")[0];
var choose = document.getElementsByTagName("input");
var p = document.getElementsByTagName("p")[0];
allSelect.onclick = function() {
if(allSelect.checked){
change.innerText = "全不选";
for(var i=1; i<choose.length; i++){
choose[i].checked = true;
}
}else{
for(var i=1; i<choose.length; i++){
choose[i].checked = false;
}
change.innerText = "全选";
}
}
p.onclick = function() {
for(var i=1; i<choose.length-1; i++){
if(choose[i].checked){
choose[i].checked = false;
}else{
choose[i].checked = true;
}
}
}
}
JavaScript这里有一个问题就是:我直接判断第一个checkbox是否被选中来进行后面的设置是行不通的,需要在外面再添加一个onclick事件的function,请问大家知道这是为什么吗,就像下面这样:去掉注释。希望朋友们指点迷津啊!感谢!
//allSelect.onclick = function() {
if(allSelect.checked){
change.innerText = "全不选";
for(var i=1; i<choose.length; i++){
choose[i].checked = true;
}
}else{
for(var i=1; i<choose.length; i++){
choose[i].checked = false;
}
change.innerText = "全选";
}
//}
下面是网页源代码的JavaScript方法:
var isCheckAll = function ()
{
for (var i = 1, n = 0; i < oInput.length; i++)
{
oInput[i].checked && n++
}
oInput[0].checked = n == oInput.length - 1;
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = this.checked
}
};
//反选
oA.onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
瞬间就觉得自己low爆了。我太菜了!
还有啊,最下面那句话用center标签就行,自己瞎几把搞了position,还以为自己搞得多辛苦终于完成了,殊不知自己搞得乱七八糟。
还有一句:我打完第二课啦!准备向第三课进军!!!加油啊denguing~