銀川智虎網絡科技有限公司 - 為(wèi)你思考,為(wèi)你實現!為(wèi)客戶創造與傳遞品牌價值是我們的最終使命!
羽之科網絡微信公衆号 掃一(yī)掃關注
tel-icon全國(guó)服務熱線:0951-5137001,18295277030
掃一(yī)掃關注羽之科網絡微信公衆号

js寫全選按鈕、全不選按鈕、反選按鈕、全選全不選複選框代碼

分類:網絡編程   作者:小(xiǎo)羽   發布時間:2018-05-28 22:12:30   點擊次數:3270
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.     <h1>你的呢(ne)愛好很廣泛!!</h1>  
  9.     <br>  
  10.     <input type="checkbox" name="checkItems" id="checkItems" value="全選/全不選">全選/全不選  
  11.     <br>  
  12.     <input type="checkbox" name="items" value="足球">足球  
  13.     <input type="checkbox" name="items" value="籃球">籃球  
  14.     <input type="checkbox" name="items" value="遊泳">遊泳  
  15.     <input type="checkbox" name="items" value="唱歌(gē)">唱歌(gē)  
  16.     <br>  
  17.     <input type="button" name="checkall" id="checkall" value="全選">  
  18.     <input type="button" name="checkall" id="checkNo" value="全不選">  
  19.     <input type="button" name="checkall" id="checkReverse" value="反選">  
  20.     <script type="text/javascript">  
  21.           
  22.         // 處理全選  
  23.         document.getElementById('checkall').onclick=function(){  
  24.         /*************************************************/           
  25.             // 獲取所有的複選框  
  26.             var checkElements=document.getElementsByName('items');  
  27.             for(var i=0;i<checkElements.length;i++){  
  28.                 var checkElement=checkElements[i];  
  29.                 // 方法一(yī)  
  30.                 // checkElement.setAttribute('checked',' checked');  
  31.                 // 方法二  
  32.                 checkElement.checked="checked";  
  33.             }  
  34.         }  
  35.         /*************************************************/  
  36.         // 處理全不選  
  37.         document.getElementById('checkNo').onclick=function(){  
  38.             // 獲取所有的複選框  
  39.             var checkElements=document.getElementsByName('items');  
  40.             for(var i=0;i<checkElements.length;i++){  
  41.                 var checkElement=checkElements[i];  
  42.                 // 方法一(yī)火狐不支持  
  43.                 // checkElement.setAttribute('checked',null);  
  44.                 // 方法二 火狐和ie都支持  
  45.                 checkElement.checked=null;  
  46.             }  
  47.         }  
  48. /******************************************************************/  
  49.         //反選  
  50.          document.getElementById('checkReverse').onclick=function(){  
  51.             // 獲取所有的複選框  
  52.             var checkElements=document.getElementsByName('items');  
  53.             for(var i=0;i<checkElements.length;i++){  
  54.                 var checkElement=checkElements[i];  
  55.                 if (checkElement.checked) {  
  56.                     checkElement.checked=null;  
  57.                 }  
  58.                 else{  
  59.                     checkElement.checked="checked";  
  60.                 }  
  61.                 // 方法一(yī)  
  62.                 // checkElement.setAttribute('checked',null);  
  63.                 // 方法二 火狐和ie都支持  
  64.                   
  65.             }  
  66.         }  
  67. /***********************************************************/  
  68.         //全選/不選  
  69.         document.getElementById('checkItems').onclick=function()  
  70.         {  
  71.          // 獲取所有的複選框  
  72.             var checkElements=document.getElementsByName('items');  
  73.             if (this.checked) {  
  74.                 for(var i=0;i<checkElements.length;i++){  
  75.                     var checkElement=checkElements[i];  
  76.                     checkElement.checked="checked";  
  77.                 }  
  78.   
  79.             }  
  80.             else{  
  81.                 for(var i=0;i<checkElements.length;i++){  
  82.                     var checkElement=checkElements[i];  
  83.                     checkElement.checked=null;  
  84.                 }  
  85.             }  
  86.   
  87.         }  
  88. </script>  
  89. </body>  
  90. </html>  
友(yǒu)情鏈接
聯系我們

電(diàn) 話:0951-5137001/18295277030

Q  Q:87651825   568464226

郵 箱:web@yuzhike.com
地 址:銀(yín)川市(shì)興慶區南(nán)熏東街天都十六區6号樓3204

聯系我們

Website Design & Power by:yuzhike.com
版權所有 © 銀川智虎網絡科技有限公司