首頁 > 開發者 > JavaScript

javascript實現複選框的全選全不選

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：text   one   border   function   選中   set   狀態   val   value   

通過複選框的id擷取到複選框 元素 對複選框綁定點擊事件

每個checkbox都設定相同的name checkOne

通過得到的元素擷取checkbox的狀態

當點擊全選全不選checkbox時，檢查全選全不選的box狀態，如果為true

就將所有其他box狀態都設定為true

如果全選全不選的狀態為false，相應的就將其他所有的box狀態checked設定為false

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>全選和全不選</title>        <script type="text/javascript">            function checkAll(){                //1.擷取編號前面的複選框                var checkAllEle=document.getElementById("checkAll");                //2.對編號前面複選框的狀態進行判斷                if(checkAllEle.checked==true){                    //3.擷取下面所有的複選框                    var checkOnes=document.getElementsByName("checkOne");                    //4.對擷取的複選框進行遍曆                    for(var i=0;i<checkOnes.length;i++){                        //5.拿前面的一個複選框，並將其狀態置為選中                        checkOnes[i].checked=true;                    }                }else{                    //6.擷取下面所有的複選框                    var checkOnes=document.getElementsByName("checkOne");                    //7.對擷取的所有複選框進行遍曆                    for(var i=0;i<checkOnes.length;i++){                        checkOnes[i].checked=false;                    }                }            }        </script>            </head>    <body>        <table border="1" width="500" height="50" align="center" >            <thead>                <tr>                    <td colspan="4">                        <input type="button" value="添加" />                        <input type="button" value="刪除" />                    </td>                </tr>                <tr>                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>                    <th>編號</th>                    <th>姓名</th>                    <th>年齡</th>                </tr>            </thead>            <tbody>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>1</td>                    <td>張三</td>                    <td>22</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>3</td>                    <td>王五</td>                    <td>27</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>4</td>                    <td>趙六</td>                    <td>29</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>5</td>                    <td>田七</td>                    <td>30</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>6</td>                    <td>汾九</td>                    <td>20</td>                </tr>            </tbody>        </table>    </body></html>

 

javascript實現複選框的全選全不選

本文章原先以中文撰寫並發佈於 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