DOM操作复选框

Posted 迷之月夜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM操作复选框相关的知识，希望对你有一定的参考价值。

DOM操作复选框

实现一个效果如下图:
技术分享

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

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

[javascript] view plain copy
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3.     <head>  
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    5.         <title>js测试</title>  
    6.           
    7.     </head>  
    8.     <body>   
    9.        您的爱好很广泛!!!  
    10.      <br>  
    11.      <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选  
    12.      <br>  
    13.         <input type="checkbox" name="items" value="足球" />足球  
    14.         <input type="checkbox" name="items" value="篮球"/>篮球  
    15.         <input type="checkbox" name="items" value="游泳"/>游泳  
    16.         <input type="checkbox" name="items" value="唱歌"/>唱歌  
    17.         <br>  
    18.         <input type="button" name="checkall" id="checkall" value="全选" />  
    19.         <input type="button" name="checkall" id="checkallNo" value="全不选" />  
    20.         <input type="button" name="checkall" id="check_revsern" value="反选" />  
    21.     </body>  
    22.     <script language="javascript">  
    23.         window.onload=function(){  
    24.             //实现全选  
    25.             document.getElementById("checkall").onclick=function(){  
    26.                 var itemElements=document.getElementsByName("items");  
    27.                 for(var i=0;i<itemElements.length;i++){  
    28.                     //方法1  
    29.                     //itemElements[i].setAttribute("checked","checked");  
    30.                     //方法2  
    31.                     itemElements[i].checked="checked";  
    32.                 }  
    33.             }  
    34.             //实现全不选  
    35.             document.getElementById("checkallNo").onclick=function(){  
    36.                 var itemElements=document.getElementsByName("items");  
    37.                 for(var i=0;i<itemElements.length;i++){  
    38.                     //方法1,IE可以，其他浏览器不支持  
    39.                     //itemElements[i].setAttribute("checked",null);  
    40.                     //方法2,都行  
    41.                     itemElements[i].checked=null;  
    42.                 }  
    43.             }  
    44.             //实现反选  
    45.             document.getElementById("check_revsern").onclick=function(){  
    46.                 var itemElements=document.getElementsByName("items");  
    47.                 for(var i=0;i<itemElements.length;i++){  
    48.                       
    49.                     //itemElements[i].checked:如果选中为true，否则false  
    50.                     if(itemElements[i].checked){  
    51.                         itemElements[i].checked=null;  
    52.                     }else{  
    53.                         itemElements[i].checked="checked";  
    54.                     }  
    55.                 }  
    56.             }  
    57.             //全选/全不选复选框的功能  
    58.             document.getElementById("checkItems").onclick=function(){  
    59.                 var itemElements=document.getElementsByName("items");  
    60.                 for(var i=0;i<itemElements.length;i++){  
    61.                       
    62.                     //itemElements[i].checked:如果选中为true，否则false  
    63.                     if(this.checked){  
    64.                         itemElements[i].checked=null;  
    65.                     }else{  
    66.                         itemElements[i].checked="checked";  
    67.                     }  
    68.                 }  
    69.             }  
    70.         }  
    71.     </script>  
    72. </html> 








以上是关于DOM操作复选框的主要内容，如果未能解决你的问题，请参考以下文章

关于JS的DOM操作——重要实例的操作

使用 jQuery 操作 DOM 后模型和 ui 不同步 - knockout.js

webapi

jquery DOM操作

暂时删除并稍后重新插入 DOM 元素？

JavaScript基础知识总结 18：dom基本操作