#### **简介**
几乎所有的项目中都会用到全选的功能,这里介绍一种通用的全选方式
#### **方法概述**
- 全选
* 选中全选,则所有项目全选
* 取消全选,则所有项目全不选
- 全选、非全选时,全选按钮状态控制
* 当所有项目全选时,全选按钮自动选中
* 当所有项目非全选时,全选按钮取消选中
#### **范例效果图**
<head>
<meta charset="utf-8">
</head>
<input type="checkbox" onclick="select_all(this);" name="idc" id="idc_all"/>全选
<input type="checkbox" onclick="check_all(this);" name="idc" />北京
<input type="checkbox" onclick="check_all(this);" name="idc" />内蒙
<input type="checkbox" onclick="check_all(this);" name="idc" />广州
<script type="text/javascript">
function select_all(obj) {
cName = obj.name;
var checkboxs = document.getElementsByName(cName);
for ( var i = 0; i < checkboxs.length; i+=1) {
checkboxs[i].checked = obj.checked;
}
}
function check_all(obj){
cName = obj.name;
var checkboxs = document.getElementsByName(cName);
all_length = checkboxs.length;
checked_length = 0;
for ( var i = 0; i < checkboxs.length; i+=1) {
if(checkboxs[i].checked == true){
checked_length += 1;
}
}
if(checked_length == all_length-1 && document.getElementById(cName+"_all").checked == false){
document.getElementById(cName+"_all").checked = true;
}else{
document.getElementById(cName+"_all").checked = false;
}
}
</script>
#### ** 源代码 **
下载地址:[源码位于github有点慢](http://files.itopers.com/select_all.html)
文章最后更新时间:
2017年05月26日 06:57:24