js寫全選按鈕、全不選按鈕、反選按鈕、全選全不選複選框程式碼
阿新 • • 發佈：2019-01-25
今天主要給大家介紹下如何用js原生程式碼寫出全選、全不選、反選按鈕。程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>你的呢愛好很廣泛！！</h1> <br> <input type="checkbox" name="checkItems" id="checkItems" value="全選/全不選">全選/全不選 <br> <input type="checkbox" name="items" value="足球">足球 <input type="checkbox" name="items" value="籃球">籃球 <input type="checkbox" name="items" value="游泳">游泳 <input type="checkbox" name="items" value="唱歌">唱歌 <br> <input type="button" name="checkall" id="checkall" value="全選"> <input type="button" name="checkall" id="checkNo" value="全不選"> <input type="button" name="checkall" id="checkReverse" value="反選"> <script type="text/javascript"> // 處理全選 document.getElementById('checkall').onclick=function(){ /*************************************************/ // 獲取所有的複選框 var checkElements=document.getElementsByName('items'); for(var i=0;i<checkElements.length;i++){ var checkElement=checkElements[i]; // 方法一 // checkElement.setAttribute('checked',' checked'); // 方法二 checkElement.checked="checked"; } } /*************************************************/ // 處理全不選 document.getElementById('checkNo').onclick=function(){ // 獲取所有的複選框 var checkElements=document.getElementsByName('items'); for(var i=0;i<checkElements.length;i++){ var checkElement=checkElements[i]; // 方法一火狐不支援 // checkElement.setAttribute('checked',null); // 方法二 火狐和ie都支援 checkElement.checked=null; } } /******************************************************************/ //反選 document.getElementById('checkReverse').onclick=function(){ // 獲取所有的複選框 var checkElements=document.getElementsByName('items'); for(var i=0;i<checkElements.length;i++){ var checkElement=checkElements[i]; if (checkElement.checked) { checkElement.checked=null; } else{ checkElement.checked="checked"; } // 方法一 // checkElement.setAttribute('checked',null); // 方法二 火狐和ie都支援 } } /***********************************************************/ //全選/不選 document.getElementById('checkItems').onclick=function() { // 獲取所有的複選框 var checkElements=document.getElementsByName('items'); if (this.checked) { for(var i=0;i<checkElements.length;i++){ var checkElement=checkElements[i]; checkElement.checked="checked"; } } else{ for(var i=0;i<checkElements.length;i++){ var checkElement=checkElements[i]; checkElement.checked=null; } } } </script> </body> </html>