JQuery案例二:實現全選、全不選和反選

來源:互聯網
上載者:User

標籤:cti   oct   this   pre   反選   script   tle   char   aci   

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>全選和全不選以及反選</title>        <script src="../js/jquery-1.8.3.js"></script>        <script>            $(function() {                //全選事件                $("#checkedAll").click(function() {                    $(".checkedOne").attr("checked",this.checked);                });                $("#reSelect").click(function() {                    $(".checkedOne").each(function() {                        this.checked = !this.checked;                    });                });                            });        </script>    </head>    <body>        <table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">            <thead>                <tr>                    <th><input type = "checkbox" id="checkedAll">全選</input></th>                    <th>編號</th><th>姓名</th><th>年齡</th>                </tr>            </thead>            <tbody>                <tr>                    <td><input type="checkbox" class="checkedOne"/></td>                    <td>1</td><td>張三</td><td>12</td>                </tr>                <tr>                    <td><input type="checkbox" class="checkedOne"/></td>                    <td>2</td><td>李四</td><td>22</td>                </tr>                <tr>                    <td><input type="checkbox" class="checkedOne" /></td>                    <td>3</td><td>王五</td><td>13</td>                </tr>                <tr>                    <td><input type="checkbox" class="checkedOne"/></td>                    <td>4</td><td>馬六</td><td>14</td>                </tr>                <tr>                    <td><input type="checkbox" class="checkedOne"/></td>                    <td>5</td><td>伍六七</td><td>17</td>                </tr>                <tr>                    <td><input type="checkbox" class="checkedOne"/></td>                    <td>6</td><td>梅花十三</td><td>17</td>                </tr>                <tr>                    <td colspan=4><input type="button" value="反選" id="reSelect" /></td>                </tr>            </tbody>        </table>    </body></html>

JQuery案例二:實現全選、全不選和反選

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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