css 简单的多选框全选全不选和反选

来源:互联网 发布:金山office for mac 编辑:程序博客网 时间:2024/06/07 13:42
<input type="checkbox" id="check1" />80000<br />
  <input type="checkbox" id="check2" />九张机<br />
  <input type="checkbox" id="check3" />说散就散<br />
  <input type="checkbox" id="check4" />尽头<br />
  <input type="checkbox" id="check5" />追光者<br />
  <input type="button" name="xuan" class="xuan" value="全选" id="xuan" onclick="x()"/>
  <input type="button" name="bu" class="bu" value="全不选" id="bu" onclick="b()"/>
  <input type="button" name="fan" class="fan" value="反选" id="fan" onclick="f()"/>
  <script>
   var xuan = document.getElementById("xuan");
   var bu = document.getElementById("bu");
   var fan = document.getElementById("fan");
   var ck1 = document.getElementById("check1");
   var ck2 = document.getElementById("check2");
   var ck3 = document.getElementById("check3");
   var ck4 = document.getElementById("check4");
   var ck5 = document.getElementById("check5");
   
   function x(){    
    ck1.checked = "checked";
    ck2.checked = "checked";
    ck3.checked = "checked";
    ck4.checked = "checked";
    ck5.checked = "checked";
   }
   function b(){    
    ck1.checked =false
    ck2.checked = false
    ck3.checked = false
    ck4.checked = false
    ck5.checked = false    
   }
   function f(){    
     ck1.checked=!ck1.checked;     
     ck2.checked=!ck2.checked;
     ck3.checked=!ck3.checked;
     ck4.checked=!ck4.checked;
     ck5.checked=!ck5.checked;    
   }
  </script>