JavaScript:复选框事件的处理

  • A+
所属分类:JavaScript

JavaScript:复选框事件的处理

复选框事件的处理

复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。
范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮的状态根据选中的选项个数自动变化,即全选按钮的状态会自动取消或者自动勾选。

  1. <!doctype html>  
  2.  <html lang = "zh-CN">  
  3.  <head>  
  4.   
  5.      <meta charset="utf-8">  
  6.      <meta name="description" content="this is a checkbox example">  
  7.      <meta name="keywords" content="checkbox,html,js">  
  8.      <title>复选框的测试</title>  
  9.   
  10.      <script type="text/javascript">  
  11.          window.onload = function () {  
  12.   
  13.              //获取复选框元素  
  14.              var checkbox = document.all('checkbox');  
  15.              var checkall = document.getElementById('checkAll');  
  16.   
  17.              /*点击全选按钮全部选中的情况*/  
  18.              checkall.addEventListener('click',function(){  
  19.                    
  20.                 if (checkbox.length == undefined) {//一个选项时  
  21.                     checkbox.checked = checkall.checked;  
  22.                 }else{  
  23.                      for (var i = 0; i < checkbox.length; i++) {//多个选项时  
  24.                          checkbox[i].checked = this.checked;  
  25.                      }  
  26.                 }  
  27.              },false);  
  28.   
  29.   
  30.              //全部按钮什么时候被自动选中以及自动取消  
  31.              if (checkbox.length == undefined) {//一个选项时  
  32.                     checkbox.addEventListener('click',function(){  
  33.                         checkall.checked = checkbox.checked;  
  34.                     },false);  
  35.                 }else{  
  36.                      for (var i = 0; i < checkbox.length; i++) {//多个选项时      
  37.                          checkbox[i].addEventListener('click',function(){  
  38.                             for (var i = 0; i < checkbox.length; i++){  
  39.                                 if (!checkbox[i].checked) {   
  40.                                     checkall.checked = false//全选自动取消  
  41.                                     break;  
  42.                                 }else{  
  43.                                     if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选  
  44.                                 }  
  45.                             }  
  46.                         },false);  
  47.                      }  
  48.             }      
  49.   
  50.   
  51.              //打印您所有的选择  
  52.              document.getElementById('selecteBtn').addEventListener('click',function() {  
  53.   
  54.                      /*一个个去选择时的情况*/  
  55.                      var yourchoose = "您选择的爱好有:";  
  56.                      if (checkbox.length == undefined) {//一个选项时  
  57.                          if (checkbox.checked) yourchoose = yourchoose + checkbox.value;  
  58.                      }else{  
  59.                          for (var i = 0; i < checkbox.length; i++) {//多个选项时  
  60.                              if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";  
  61.                          };  
  62.                      }  
  63.                      alert(yourchoose);      
  64.                  },false);  
  65.          }  
  66.      </script>  
  67.   
  68.  </head>  
  69.  <body>  
  70.      <form action="">  
  71.          您的爱好有:<br/>  
  72.          <input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/>  
  73.          <input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/>  
  74.          <input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/>  
  75.          <input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>  
  76.          <input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>  
  77.          <input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>  
  78.          <input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>  
  79.          <input type="button" name="selecteBtn" id="selecteBtn" value="选择">  
  80.      </form>  
  81.  </body>  
  82.  </html>  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: