cari

Rumah >hujung hadapan web >tutorial js >js实现全选全不选

js实现全选全不选

小云云
小云云asal
2017-12-08 16:25:057680semak imbas

本文我们和大家分享js的一个小知识，js实现全选全不选，希望能帮助到大家。

<!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>

相关推荐：

jQuery中实现全选，反选实例代码 （推荐）

分享jquery全选反选实例

js html css实现复选框全选与反选

Atas ialah kandungan terperinci js实现全选全不选. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：前端之js双向数据绑定Artikel seterusnya：js多点触控的问题

Artikel berkaitan

Lihat lagi