欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript 怎么实现全选

程序员文章站 2023-12-21 16:55:10
...

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

javascript 怎么实现全选

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

javascript 怎么实现全选?

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

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

javascript 怎么实现全选

先说全选:

  • 当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;
        }

最终的效果如下:

javascript 怎么实现全选

推荐学习:《js基础教程

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

相关标签: javascript

上一篇:

下一篇: