全选框的总结:
------布局方面:
1.一个大的 body标记选择器,全局进行文字大小的设置
2.类选择器,定义一个类选择器,利用div划分一个区域,类选择器定义这个区域的大小和边框,margin,padding属性
可以利用border的属性进行外边框的美化,这里用到的属性包括: border里面的 solid,radius
3.类选择器:定义一个类选择器,利用在2中划分出来的区域,再次划分出一个div区域,类选择器定义这个区域的大小margin,padding属性
----3.1标记选择器,在3中划分的区域可以再次利用标记选择器,对3中的标签进行美化,text--decoration超链接无下划线属性(默认有下划线)
border-bottom相当于hr的分割线的作用,相当于border,只管底部就可以。可以将大div中的小div进行分隔,看起来更加的美观。
4.类选择器:定义一个类选择器,利用2中划分出来的区域,再次划分一个div区域,类选择器定义这个区域的大小margin,padding属性
--------javascript方面:
1.格式:定义变量结尾用分号,多个赋值语句结尾用分号分隔,循环语句中不需要分号
2.直接可以在js中给某个标签下的某个事件绑定执行函数,不需要在body中的标签上绑定,分层思想
3.&&的用法很巧妙,以及只关注按钮,在js中绑定事件,很奇妙的做法!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选框</title>
<style>
body{
font-size: 14px;
}
a{
text-decoration: none;
color: deepskyblue;
}
.dd{
border: 1px solid #999;
border-radius: 10px;
width: 130px;
margin: 20px;
}
.d1{
border-bottom: 1px solid #999;
width: 110px;
margin: 5px 10px;
padding: 5px 0;
}
.d2{
width: 110px;
margin: 5px 10px;
padding: 5px 0;
line-height: 28px;
}
</style>
<script>
window.onload = function(){
var ch=document.getElementsByTagName("input");
var fx=document.getElementsByTagName("a");
var all=function(){
for(var i=1, n=0; i< ch.length; i++){
ch[i].checked && n++
}
ch[0].checked = n == ch.length-1;
ch[0].nextSibling.innerHTML = ch[0].checked ? "全不选" : "全选"
};
ch[0].onclick = function(){
for(var i=1; i<ch.length; i++){
ch[i].checked = this.checked
}
all()
}
fx[0].onclick = function(){
for(var i=1; i<ch.length; i++){
ch[i].checked = !ch[i].checked
}
all()
}
for(var i=1; i<ch.length; i++){
ch[i].onclick = function(){
all()
}
}
}
</script>
</head>
<body>
<div class="dd">
<div class="d1">
<input type="checkbox" value="all" id="all"><lable>全选</lable>
<a href="javascript: ;">反选</a>
</div>
<div class="d2">
<input type="checkbox" name="a" value="1">选项一<br />
<input type="checkbox" name="a" value="2">选项二<br />
<input type="checkbox" name="a" value="3">选项三<br />
<input type="checkbox" name="a" value="4">选项四<br />
<input type="checkbox" name="a" value="5">选项五<br />
<input type="checkbox" name="a" value="6">选项六<br />
<input type="checkbox" name="a" value="7">选项七<br />
<input type="checkbox" name="a" value="8">选项八<br />
<input type="checkbox" name="a" value="9">选项九<br />
<input type="checkbox" name="a" value="10">选项十
</div>
</div>
</body>
</html>