当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS案例五：设置全选、全不选以及反选

JS案例五：设置全选、全不选以及反选

2018年08月31日  | 移动技术网IT编程  | 我要评论 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全选和全不选以及反选</title>
        <script>
            window.onload = function() {
                var checkedall = document.getelementbyid("checkedall");
                var checkedone = document.getelementsbyname("checkedone");
                //全选和全不选事件
                checkedall.onclick = function() {
                    if(checkedall.checked == true){
                        for(var i = 0;i<checkedone.length;i++) {
                            checkedone[i].checked = true;
                        }
                    }else {
                        for(var i = 0;i<checkedone.length;i++) {
                            checkedone[i].checked = false;
                        }
                    }
                }
                //反选事件
                document.getelementbyid("reselect").onclick = function() {
                    for(var i =0;i<checkedone.length;i++) {
                        checkedone[i].checked = !checkedone[i].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" name="checkedone"/></td>
                    <td>1</td><td>张三</td><td>12</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkedone"/></td>
                    <td>2</td><td>李四</td><td>22</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkedone" /></td>
                    <td>3</td><td>王五</td><td>13</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkedone"/></td>
                    <td>4</td><td>马六</td><td>14</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkedone"/></td>
                    <td>5</td><td>伍六七</td><td>17</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网