javascript实现全选全不选
来源：程序员人生 发布时间：2014-12-10 08:59:44 阅读次数：2281次
在JSP页面中有6个复选框，第1个复选框是全选和全不选，其余5个为普通复选框，当点击全选复选框后，普通复选框将被全部选中，如果再次点击 全选复选框，那末普通复选框将被全部不选中，同时，如果全选复选框在选中状态下，将普通复选框的选中状态去掉，那末全选复选框也被设为未选中。相反，如果当前全选复选框未被选中，如果普通复选框被全部选中，那末全选按钮也被选中。
下面看JSP中复选框代码
<table>
<tr>
<td><input type="checkbox" name="checkall" onclick="selectall()"></td>
<td>全选</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="check" onclick="checkItem(this)"></td>
<td>5</td>
</tr>
</table>
然后我们看他们的javascript代码
<script type="text/javascript">
function selectall(){
//获得全选复选框
var root = document.getElementById("checkall");
//获得全选复选框的状态
var status = root.checked;
//获得其他复选框集合
var elem = document.getElementsByName("check");
//如果全选复选框状态为真则全选其他按钮,否则选不选其他按钮
if(status){
for(var i = 0;i<elem.length;i++){
elem[i].checked = true;
}
}else{
for(var i = 0;i<elem.length;i++){
elem[i].checked = false;
}
}
}
function checkItem(ele){
var root = document.getElementById("checkall");
if(!ele.checked){
//当在全选状态去除某个非全选复选框时，全选复选框checked属性要设为false
root.checked = false;
}else{
//当在全不选状态时，补全剩下的非全选复选框时，全选复选框checked属性设为true
var elem = document.getElementsByName(ele.name);
for(var i = 0;i<elem.length;i++){
if(!elem[i].checked){
return;
}
}
root.checked = true;
}
}
</script>
这样就能够实现上述功能。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
