DOM操作复选框

DOM操作复选框

实现一个效果如下图:

点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。

下面我们来实现这个效果。
源代码:

[javascript] view plain copy

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js测试</title>
</head>
<body>
您的爱好很广泛!!!
<br>
<inputtype="checkbox"name="checkItems"id="checkItems"value="全选/全不选"/>全选/全不选
<br>
<inputtype="checkbox"name="items"value="足球"/>足球
<inputtype="checkbox"name="items"value="篮球"/>篮球
<inputtype="checkbox"name="items"value="游泳"/>游泳
<inputtype="checkbox"name="items"value="唱歌"/>唱歌
<br>
<inputtype="button"name="checkall"id="checkall"value="全选"/>
<inputtype="button"name="checkall"id="checkallNo"value="全不选"/>
<inputtype="button"name="checkall"id="check_revsern"value="反选"/>
</body>
<scriptlanguage="javascript">
window.onload=function(){
//实现全选
document.getElementById("checkall").onclick=function(){
varitemElements=document.getElementsByName("items");
for(vari=0;i<itemElements.length;i++){
//方法1
//itemElements[i].setAttribute("checked","checked");
//方法2
itemElements[i].checked="checked";
}
}
//实现全不选
document.getElementById("checkallNo").onclick=function(){
varitemElements=document.getElementsByName("items");
for(vari=0;i<itemElements.length;i++){
//方法1,IE可以，其他浏览器不支持
//itemElements[i].setAttribute("checked",null);
//方法2,都行
itemElements[i].checked=null;
}
}
//实现反选
document.getElementById("check_revsern").onclick=function(){
varitemElements=document.getElementsByName("items");
for(vari=0;i<itemElements.length;i++){
//itemElements[i].checked:如果选中为true，否则false
if(itemElements[i].checked){
itemElements[i].checked=null;
}else{
itemElements[i].checked="checked";
}
}
}
//全选/全不选复选框的功能
document.getElementById("checkItems").onclick=function(){
varitemElements=document.getElementsByName("items");
for(vari=0;i<itemElements.length;i++){
//itemElements[i].checked:如果选中为true，否则false
if(this.checked){
itemElements[i].checked=null;
}else{
itemElements[i].checked="checked";
}
}
}
}
</script>
</html>

优质内容筛选与推荐>>
1、倒计时器 CountDownTimer
2、iptables详解--转
3、Spark 定制版：017~Spark Streaming资源动态申请和动态控制消费速率原理剖析
4、Git常用命令和Git团队使用规范指南
5、swift中构造方法和Kvc

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看