javascript 怎么实现全选

javascript实现全选的方法：1、通过HTML和CSS创建一个表单；2、用DOM方法分别获取全选和单选的“input”元素；3、设置一个变量isAllChecked；4、将isAllChecked的值赋给全选按钮。

本文操作环境：Windows7系统、javascript1.8.5版、Dell G3电脑。

javascript 怎么实现全选？

用JS实现表单的全选与反选

这也是一个练习，就是一般电商购物车的全选，另外加了个反选（貌似有反选功能的购物车不多，倒是windows资源管理器有反选功能）

先说全选：

• 当4行商品都被勾选上时，“全选”自动被勾选上；当有商品没有被勾选时，“全选”自动被取消。

• 当4行商品商品并没有被全部勾选上时，勾选“全选”可以让4行商品全部被勾选上；

• 当“全选”处于被勾选状态时，取消“全选”的勾选，所有的商品都取消勾选。

梳理好需求，我们先用HTML和CSS把这个表单画出来，代码如下：

html>
    head>
        meta charset="utf-8">
        tITle>
    全选2/title>
        style tyPE="text/css">
             .wrap{
                margin-left: 500px;
                margin-top: 200px;
        }
        table{
                border-collapse:collapse;
        }
        th{
                border:1px solid black;
                height: 45px;
           }
        td{
                border:1px solid black;
                text-align: center;
                font-weight: bold;
        }
        /style>
    /head>
    body>
        div class="wrap">
              table cellspacing="0" cellpadding="14">
                thead>
                    tr>
                        th>
                            input type="checkbox" id="selectAll" onclick="funcAll()">
                        /th>
                        th>
    商品/th>
                        th>
    价格/th>
                    /tr>
                /thead>
                tbody id="j_tb">
                    tr>
                        td>
                            input type="checkbox" class="selectOne" onclick="funcOne()">
                        /td>
                        td>
    iPhone X/td>
                        td>
    8000/td>
                    /tr>
                    tr>
                        td>
                            input type="checkbox" class="selectOne" onclick="funcOne()">
                        /td>
                        td>
    iPad PRo/td>
                        td>
    5000/td>
                    /tr>
                    tr>
                        td>
                            input type="checkbox" class="selectOne" onclick="funcOne()">
                        /td>
                        td>
    iPad air/td>
                        td>
    2000/td>
                    /tr>
                    tr>
                        td>
                            input type="checkbox" class="selectOne" onclick="funcOne()">
                        /td>
                        td>
    Apple watch/td>
                        td>
    2000/td>
                    /tr>
                /tbody>
            /table>
            input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
        /div>
    /body>
    /html>
    

这里我已经把鼠标点击事件的函数命名好了，全选叫“funcAll()”，单选叫“funcOne()”，反选叫“funcBackward()”。CSS部分主要给表单加上边框，同时交接处边框融合，基本就是最朴素的样子。

先说第2条和第3条需求，逻辑相对简单：

用DOM方法分别获取全选和单选的“input”元素，全选只有一个，直接用getElementById()就可以了（已经提前设置好id），而单选有四个，用getElementByclassname()来获取（已经提前设置好class），当然获取到的是一个数组。

讲获取到的元素都赋值给变量，然后用for循环遍历数组，将全选的这个变量的checked属性赋值给每个单选的变量的checked属性。

此时，已经同时解决2和3，代码如下：

function funcAll(){
                VAR selectAll = document.getElementById('selectAll');
                var selectOnes = document.getElementsByClassName('selectOne');
                for (var i = 0;
     i  selectOnes.length;
 i++) {
                     //循环遍历，把全选框的值赋给每个单选框                selectOnes[i].checked = selectAll.checked;
                         }
        }
    

接下来说第1条：“当4行商品都被勾选上时，“全选”自动被勾选上；当有商品没有被勾选时，“全选”自动被取消。”

在这里，“全选”的状态类似在监听其他所有按钮，一旦有变化，随之变化。所以这个逻辑要写到每行商品单选按钮的鼠标点击事件里。

我设置了一个变量isAllChecked作为桥梁，初始状态将isAllChecked定义为true，循环遍历每个单选按钮，一旦检测到有单选按钮没被勾选，就将isAllChecked置为false，跳出循环，并将isAllChecked的值赋给全选按钮。

这样一来，只要有一个单选按钮没被选中，就会将全选也变成未选中状态。，代码如下：

function funcOne(){
                                                                  var selectAll = document.getElementById('selectAll');
                //函数作用域，所以得再定义一遍            var selectOnes = document.getElementsByClassName('selectOne');
                var isAllChecked = true;
                                            //定义一个变量作为桥梁来控制全选按钮            for (var i = 0;
     i  selectOnes.length;
 i++) {
                if (selectOnes[i].checked === false) {
                        isAllChecked = false;
                        break;
                }
            }
                selectAll.checked = isAllChecked;
        }
    

再来说说反选

1. 点击反选按钮，所有的单选按钮状态取反：选中的变成未选中，未选中的变成选中
2. 点击反选，造成的结果，仍然能够让全选符合之前的逻辑。

第1条其实很好实现，点击反选按钮时，循环遍历4个单选按钮，将每个元素对应的checked属性取反即可。

但是，我们在前面实现的全选监听所有单项，实际上是在每个单选按钮的点击事件里实现的，也就是说，如果我们不通过点击单选按钮来改变单选按钮的状态，全选实际上是监听不到全局的。

所以，我们可以把监听这部分的代码再写到反选的鼠标点击函数里去，最后的代码如下：

            var selectAll = document.getElementById('selectAll');
                //函数作用域，所以得再定义一遍            var selectOnes = document.getElementsByClassName('selectOne');
                for (var i = 0;
     i  selectOnes.length;
 i++) {
                    selectOnes[i].isAllChecked = !selectOnes[i].checked;
            }
            function funcOne(){
}
    ;
                var isAllChecked = true;
                                            //定义一个变量作为桥梁来控制全选按钮            for (var i = 0;
     i  selectOnes.length;
 i++) {
                if (selectOnes[i].checked === false) {
                        isAllChecked = false;
                        break;
                }
            }
                selectAll.checked = isAllChecked;
        }
    

最终的效果如下：

推荐学习：《js基础教程》

以上就是javascript 怎么实现全选的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！