JavaScript实现复选框全选或全取消操作

更新时间：2023年06月11日 00:51:02 作者：qq_39111074

这篇文章主要为大家详细介绍了JavaScript实现复选框全选或全取消操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现复选框全选或全取消的具体代码，供大家参考，具体内容如下

实现思路

1、获取总选框、所有小选框元素对象
2、按钮控制小按钮- - -给总选框绑定onclick点击事件，事件处理程序- - -for循环遍历所有小选框，将总选框的- - -checked属性值- - -赋值给它们
3、小按钮影响总按钮- - -for循环给每个小复选框绑定点击事件，每次点击都 for循环检查所有的复选框是否被选中：
设置一个变量 flag 控制总按钮的选中状态，初始值为 true ，for循环遍历检查各小复选框选中状态，只要有一个没有选上，flag = false，break 跳出循环不再检查后面的小复选框状态，最后总按钮checked属性值 = flag

注意：在html中选中状态 checked = “checked”,但是在js中，选中状态- - -checked = true; 未选中状态- - -checked = false;

建议：这种取属性值的，可以在控制台打印一下，看下值是多少

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }
        
        thead {
            color: #fff;
            background-color: #008dd0;
        }
    </style>
</head>

<body>
    <div class="box">
        <table border="1" cellspacing="0" cellpadding="5" width="200" align="center">
            <thead>
                <tr>
                    <th><input type="checkbox" value="0" id="cbAll"></th>
                    <th>运动</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" value="1"></td>
                    <td>跑步</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="2"></td>
                    <td>跳绳</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="3"></td>
                    <td>瑜伽</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="4"></td>
                    <td>游泳</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="5"></td>
                    <td>骑行</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var all = document.querySelector('#cbAll');
        var sports = document.querySelector('#tb').querySelectorAll('input');

        // 给全选按钮绑定点击事件
        all.onclick = function() {
            console.log(all.checked);
            for (var i = 0; i < sports.length; i++) {
                sports[i].checked = all.checked;
            }
        }

        // 给每个小复选框绑定点击事件
        for (var i = 0; i < sports.length; i++) {
            sports[i].onclick = function() {
                // 控制全选按钮是否选中
                var flag = true;
                // 每次点击一个小框，都检查是否所有复选框都被选中
                for (var i = 0; i < sports.length; i++) {
                    if (!sports[i].checked) {
                        flag = false;
                        break; // 只要有一个小复选框没有被选中，全选按钮就没被选中，可跳出循环，下面小复选框不用再判断
                    }
                }
                all.checked = flag;
            }
        }
    </script>
</body>

</html>

页面效果：

下面是补充资料

实现步骤

1.需求分析

全选按钮——当用户点击全选时，所有子列表都变为选中状态，且全选按钮的文字描述也会做相应改变。
子列表按钮——当用户选中所有子列表时，全选按钮也会变成选中状态。
反选按钮——对子列表的选中状态做相应改变，例如：选中状态变为未选中状态。

2.HTML结构

代码如下（示例）：

 
    <!-- 表格外部容器 -->
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                        <span id="txt">全选</span>
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧肉</td>
                    <td>好再来</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                    <td>好再来</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>油炸榴莲</td>
                    <td>好再来</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>清蒸助教</td>
                    <td>好再来</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5"><button id="rev">反选</button></td>
                </tr>
            </tfoot>
        </table>
    </div>

3.CSS样式

代码如下（示例）：

   <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        td:nth-of-type(1) {
            text-align: center;
        }
        tbody tr,
        tfoot tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        button {
            width: 50px;
        }
    </style>

4.JS部分

  <script>
        //获取全选的这个复选框
        var ckAll = document.getElementById("j_cbAll");
        //获取文字显示span
        var txt = document.getElementById("txt");
        //获取tbody中所有的小复选框
        var cks = document.querySelectorAll("#j_tb input");
        // console.log(cks);
        //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
        ckAll.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }
            //顺便修改文本显示
            txt.innerText = this.checked ? "全不选" : "全选";
        };
        //获取tbody中所有的复选框,分别注册点击事件
        for (var i = 0; i < cks.length; i++) {
            // 此处了调用了下方封装的函数对象，但未调用函数？
            cks[i].onclick = fn;
        }
        // 反选功能
        // 获取按钮
        var btn = document.getElementById("rev");
        btn.onclick = function () {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = !cks[i].checked
            }
            fn();
        }
        // 代码复用，函数封装
        function fn() {
            var flag = true; //默认都被选中了
            //判断是否所有的复选框都选中
            for (var j = 0; j < cks.length; j++) {
                if (!cks[j].checked) {
                    flag = false;
                    break;
                }
            }
            //全选的这个复选框的状态就是flag这个变量的值
            ckAll.checked = flag;
            //记得修改文本显示
            txt.innerText = flag ? "全不选" : "全选";
        }
    </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
复选框

Python执行js字符串常见方法示例
这篇文章主要为大家介绍了Python执行js字符串常见方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
这篇文章主要介绍了使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧，对js function apply相关知识感兴趣的朋友一起学习吧
2015-12-12
bootstrap实现轮播图效果
这篇文章主要为大家详细介绍了bootstrap实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
js 数组详细操作方法及解析合集
在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下
2018-06-06
浅谈JS中的!=、== 、!==、===的用法和区别
下面小编就为大家带来一篇浅谈JS中的!=、== 、!==、===的用法和区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
javascript数组遍历的方法实例分析
这篇文章主要介绍了javascript数组遍历的方法,结合实例形式分析了javascript数组遍历及相关的some、every、filter、map等方法的使用技巧,需要的朋友可以参考下
2016-09-09
基于electron的音视频播放器
本文主要介绍了基于electron的音视频播放器，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
深入理解jQuery()方法的构建原理
对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理，有需要的朋友们可以参考借鉴。
2016-12-12
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
脚本吧 - 幻宇工作室用到js,超强推荐expand.js...
2006-12-12
原生js实现淘宝放大镜效果
这篇文章主要为大家详细介绍了原生js实现放大镜效果，制作一个类似于淘宝的放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11

JavaScript实现复选框全选或全取消操作

实现思路

代码示例

下面是补充资料

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具