码迷,mamicode.com
首页 > 其他好文 > 详细

多选框

时间:2016-08-19 14:55:23      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

  <!DOCTYPE html>
  <html>
  <head>
  <title>多选框</title>
  <meta charset="utf-8">
  <style>
  *{margin:20; padding:0;}
  </style>
  </head>
  <body>
  <ul>
   
  <li><input type="checkbox">西瓜</li>
  <li><input type="checkbox">茄子</li>
  <li><input type="checkbox">黄瓜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">白菜</li>
  <li><input type="checkbox">情人结</li>
   
  <button onclick="change1(true)">全选</button>
  <button onclick="change1(false)">不全选</button>
  <button onclick="change3()">反选</button>
   
  <li><input onclick="change(this)" type="checkbox">点点</li>
   
  </ul>
  <script>
  var obj=document.getElementsByTagName(‘input‘);
   
  function change1(res){
  for(var i=0;i<obj.length;i++){
  obj[i].checked=res;
  }
  }
   
  function change(num){
  for(var i=0;i<obj.length;i++){
  obj[i].checked = num.checked
  }
  }
   
   
  function change3(){
  for(var i=0;i<obj.length;i++){
  if(obj[i].checked==true){
  obj[i].checked=false;
  }else{
   
  obj[i].checked=true;
  }
  }
  }
  </script>
  </body>
  </html>

多选框

标签:

原文地址:http://www.cnblogs.com/-qiang/p/5787299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!