多选框

  <!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>
posted @ 2016-08-19 13:37  多幸运1号  阅读(233)  评论(0)    收藏  举报