• 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> 
  • 相关阅读:
    Android Intent 教程
    ios 获取手机信息（UIDevice、NSBundle、NSLocale）
    [实时渲染] 2.3 几何处理阶段
    腾讯2016实习生面试经验（已经拿到offer)
    Swift编程语言学习6—— 闭包
    head first c&lt;11&gt;初探网络编程上
    APM2.8 Rover 自己主动巡航车设计(固件安装和设置)
    关于java中String的一点理解
    又一次认识java（一） ---- 万物皆对象
    Linux启动Oracle监听和服务
  • 原文地址：https://www.cnblogs.com/liubin1988/p/7811238.html
Copyright © 2020-2023  润新知