Home > Article > Web Front-end > js realizes selecting all and not selecting all

js realizes selecting all and not selecting all

小云云Original: 2017-12-08 16:25:057595browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Front-end js two-way data bindingNext article：Front-end js two-way data binding

See more

js realizes selecting all and not selecting all

Related articles