复选框全选/反选

来源：互联网发布：食物营养软件编辑：程序博客网时间：2024/05/21 10:51

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>

       <div class="main">
           <input type="checkbox" value="篮球" name="qiu"/>篮球<br>
           <input type="checkbox" value="乒乓球" name="qiu"/>乒乓球<br>
           <input type="checkbox" value="排球" name="qiu"/>排球<br>
           <input type="checkbox" value="滑雪" name="qiu"/>滑雪<br>
           <input type="button" id="quan" value="全选" onclick="quan()"/>
           <input type="button" id="quanbu" value="全不选" onclick="quanbu()"/>
           <input type="button" id="fan" value="反选" onclick="fan()"/>
           <input type="checkbox" id="all" value="全选/全不选" onclick="all12()"/>
       </div>
       <script type="text/javascript">
           function quan(){
               //获取所有的复选框
//               var cbs = document.getElementsByTagName();
               var cbs = document.getElementsByName("qiu");
//               var cbs2 = document.getElementsByClassName();
               for (var i = 0;i<cbs.length;i++) {
                   //取出每个复选框
                   var cb = cbs[i];
                   //置为选中
                   cb.checked = true;
               }
           }
           function quanbu(){
               //获取所有的复选框
//               var cbs = document.getElementsByTagName();
               var cbs = document.getElementsByName("qiu");
//               var cbs2 = document.getElementsByClassName();
               for (var i = 0;i<cbs.length;i++) {
                   //取出每个复选框
                   var cb = cbs[i];
                   //置为选中
                   cb.checked = false;
               }
           }
           var flag = true;
           function all12(){
               if(flag){
                   quan();
                   flag=false;
               }else{
                   quanbu();
                   flag=true;
               }
           }
           function fan(){
               var cbs = document.getElementsByName("qiu");
               for (var i = 0;i<cbs.length;i++) {
                   var cb = cbs[i];
                   cb.checked = !cb.checked;
               }
           }
       </script>
   </body>
</html>

阅读全文

0 0