首頁 > 其他

js實現全選、反選、不選

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.     <title>js實現checkbox全選，反選，全不選</title>  
  6.     <script type="text/javascript">  
  7.         //複選框全選   
  8.         function checkAll(formvalue) {   
  9.             var roomids = document.getElementsByName(formvalue);   
  10.             for (var j = 0; j < roomids.length; j++) {   
  11.                 if (roomids.item(j).checked == false) {   
  12.                     roomids.item(j).checked = true;   
  13.                 }   
  14.             }   
  15.         }   
  16.   
  17.         //複選框全不選   
  18.         function uncheckAll(formvalue) {   
  19.             var roomids = document.getElementsByName(formvalue);   
  20.             for (var j = 0; j < roomids.length; j++) {   
  21.                 if (roomids.item(j).checked == true) {   
  22.                     roomids.item(j).checked = false;   
  23.                 }   
  24.             }   
  25.         }   
  26.   
  27.         //複選框選擇轉換   
  28.         function switchAll(formvalue) {   
  29.             var roomids = document.getElementsByName(formvalue);   
  30.             for (var j = 0; j < roomids.length; j++) {   
  31.                 roomids.item(j).checked = !roomids.item(j).checked;   
  32.             }   
  33.         }   
  34.   
  35.     </script>  
  36. </head>  
  37. <body>  
  38.   <input type="radio" name="all" id="all" onclick="checkAll('test')" />  
  39.     全選   
  40.     <input type="radio" name="all" id="Checkbox1" onclick="uncheckAll('test')" />  
  41.     全不選   
  42.     <input type="radio" name="all" id="Checkbox2" onclick="switchAll('test')" />  
  43.     反選<br />  
  44.     <sel  
  45.     <input name="test" value="複選框1" type="checkbox" />複選框1<br />  
  46.     <input name="test" value="複選框2" type="checkbox" />複選框2<br />  
  47.     <input name="test" value="複選框3" type="checkbox" />複選框3<br />  
  48.     <input name="test" value="複選框4" type="checkbox" />複選框4<br />  
  49.     <input name="test" value="複選框5" type="checkbox" />複選框5<br />  
  50.     <input name="test" value="複選框6" type="checkbox" />複選框6<br />  
  51. </body>  
  52. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>js實現checkbox全選，反選，全不選</title>    <script type="text/javascript">        //複選框全選        function checkAll(formvalue) {            var roomids = document.getElementsByName(formvalue);            for (var j = 0; j < roomids.length; j++) {                if (roomids.item(j).checked == false) {                    roomids.item(j).checked = true;                }            }        }        //複選框全不選        function uncheckAll(formvalue) {            var roomids = document.getElementsByName(formvalue);            for (var j = 0; j < roomids.length; j++) {                if (roomids.item(j).checked == true) {                    roomids.item(j).checked = false;                }            }        }        //複選框選擇轉換        function switchAll(formvalue) {            var roomids = document.getElementsByName(formvalue);            for (var j = 0; j < roomids.length; j++) {                roomids.item(j).checked = !roomids.item(j).checked;            }        }    </script></head><body>  <input type="radio" name="all" id="all" onclick="checkAll('test')" />    全選    <input type="radio" name="all" id="Checkbox1" onclick="uncheckAll('test')" />    全不選    <input type="radio" name="all" id="Checkbox2" onclick="switchAll('test')" />    反選<br />    <sel    <input name="test" value="複選框1" type="checkbox" />複選框1<br />    <input name="test" value="複選框2" type="checkbox" />複選框2<br />    <input name="test" value="複選框3" type="checkbox" />複選框3<br />    <input name="test" value="複選框4" type="checkbox" />複選框4<br />    <input name="test" value="複選框5" type="checkbox" />複選框5<br />    <input name="test" value="複選框6" type="checkbox" />複選框6<br /></body></html>

  原文網址：http://xdwangiflytek.iteye.com/blog/1343416

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More