js realizes selecting all and not selecting all-JS Tutorial-php.cn

js realizes selecting all and not selecting all

小云云

Release： 2017-12-08 16:25:05

Original

7647 people have browsed it

In this article, we share with you a little knowledge of js. js implements select all and none. I hope it can help everyone.

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>全选和全不选</title>  
        <script>  
            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++){  
                        //8.拿到每一个复选框，并将其状态置为未选中  
                        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>

Copy after login

Related recommendations:

Realize all selection and reverse selection example code in jQuery (recommended)

Share jquery select all and reverse selection example

js html css to implement full selection and inverse selection of check boxes

The above is the detailed content of js realizes selecting all and not selecting all. For more information, please follow other related articles on the PHP Chinese website!