JS 表单全选取消案例

已于 2022-03-21 21:00:44 修改
阅读量1k 收藏 13
点赞数 3
分类专栏： 前端学习 文章标签： javascript 前端 html
于 2022-02-21 22:16:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45387575/article/details/123054895
版权

需求：

1、点击上面全选复选框，下面所有复选框都选中

2、再次点击全选复选框，下面所有的复选框都不选中

3、如果下面复选框全部选中，上面的全选按钮就会自动选中

4、如果下面复选框有一个没有选中，上面全选按钮就不选中

5、所有复选框一开始默认都没有选中

分析--难点第二部分：

需要给下面所有的复选框绑定点击事件，都要循环查看下面的复选框是否被选中，如果没有选中，上面全选就不选中

<!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>Document</title>
    <style>
        table {
            width: 400px;
            height: 200px;
            margin: 20px auto;
            text-align: center;
            border-collapse: collapse;
        }
        
        thead {
            height: 50px;
            background-color: skyblue;
            font-size: 20px;
            color: white;
        }
        
        tbody {
            text-align: left;
        }
        
        td {
            border: 1px solid grey;
            padding-left: 10px;
            vertical-align: middle;
        }
        /* 鼠标经过框会有一个加强效果 */
        
        tbody tr:hover {
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 先完成html与css部分，一个表单元素组成即可要区分thead和tbody -->
    <table>
        <thead>
            <td><input type="checkbox" class="da"></td>
            <td>商品</td>
            <td>价钱</td>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="xiao"></td>
                <td>iPone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="xiao"></td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="xiao"></td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="xiao"></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获得大、小复选框
        var da = document.querySelector('.da')
        var xiao = document.querySelectorAll('.xiao')
        console.log(xiao)
            //checked='checked'就是复选框被选中  (注意属性和样式的写法，不需要加style.)
            //1、选中全选框，下面所有的复选框都被选中,点击一次，表示全选，再次点击表示取消全选，使用flag来表示
            //所有复选框默认不选中
            //开始flag=0表示全选框未选中，flag=1表示选中  
        var flag = 0
        da.onclick = function() {
            //可以不定义flag，直接判断da.checked值是true还是false来判断
            if (flag == 0) {
                for (var i = 0; i < xiao.length; i++) {
                    xiao[i].checked = 'checked'
                }
                flag = 1
            } else {
                for (var i = 0; i < xiao.length; i++) {
                    xiao[i].checked = ''
                }
                flag = 0 //注意这个flag在外部循环依然是等于0的，也不知道为什么？？  注册事件函数里面的值，不会改变外部的值
            }
        }

        //2、当所有的子复选框都选中的时候，则全选框被选中

        //怎么判断复选框被选中，按键按下表示复选框被选中（比较难）
        var fla = 0
        for (var j = 0; j < xiao.length; j++) {

            xiao[j].onclick = function() {
                if (this.checked) {
                    fla++
                } else {
                    fla-- //这一步缺一不可，很重要
                }
                if (fla == 4) {
                    da.checked = 'checked'
                } else {
                    da.checked = ''
                }
            }

        }
        //完成
    </script>
</body>

</html>

可以设置一个变量，来控制全选是否选中

第二部分也可以这样子更改：

        for (var i = 0; i < xiao.length; i++) { //给每个按钮绑定事件
            xiao[i].onclick = function() {
                var flag = true //控制全选按钮是否被选中

                //每次点击下面的复选框都要循环检查这四个小按钮是否全部选中
                for (var i = 0; i < xiao.length; i++) { //i不会冲突，因为作用域不同
                    if (!xiao[i].checked) { //如果有一个没有被选中，加了一个取反操作
                        flag = false；
                       break//退出for循环，提高执行效率，因为只要有一个按钮没有被选中，就不需要再判断了

                    }
                    //当整个都检查完毕之后，再让全选按钮的checked属性等于flag
                }
                da.checked = flag
            }
        }

jQuery实现商品购物全选效果：

思路：

1、里面3个小的复选框按钮选中状态跟着全选按钮走（看checked属性-表单固有属性prop获取或者设置）

<!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>Document</title>
    <style>
        .nav {
            width: 200px;
            height: 20px;
            background-color: grey;
        }
        
        .endnav {
            width: 200px;
            height: 20px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="nav"><input type="checkbox">全选</div>
    <div class="box1"><input type="checkbox" class="ckeb"></div>
    <div class="box2"><input type="checkbox" class="ckeb"></div>
    <div class="box3"><input type="checkbox" class="ckeb"></div>
    <div class="box4"><input type="checkbox" class="ckeb"></div>
    <div class="endnav"><input type="checkbox">全选</div>
    <script>
        // var inputs = document.querySelectorAll('input')
        // for (i = 1; i < inputs.length - 1; i++) {
        //     inputs[i].setAttribute('index', 'chekeetm')
        // }
        $(function() {
            //勾选第一个nav全选按钮，下面的按钮全部选中,但最后一个不选
            //首先要获取第一个按钮的状态
            //是点击一下复选框，就要获取一次，而不是直接写，这样只能获取复选框的初始状态
            // 勾选最后一个按钮，上面包括第一个全选按钮选中
            $('.nav input').change(function() {
                    var esta = $('.nav input').prop('checked')
                    var esta2 = $('.endnav input').prop('checked')
                    console.log($('.nav input').prop('checked'))
                        //当esta状态伟true的时候，下面所有的按钮状态都为选中
                        // if (esta == true) {
                        //     $('input').prop('checked', true)
                        //     $('.endnav input').prop('checked', false)
                        // } else if (esta == false) {
                        //     $('input').prop('checked', false)
                        // }
                    $('input').prop('checked', $('.nav input').prop('checked'))
                    $('.endnav input').prop('checked', false)
                })
                //给最后一个全选按钮添加勾选事件
            $('.endnav input').change(function() {
                    var esta2 = $('.endnav input').prop('checked')

                    //当esta2状态伟true的时候，上面所有的按钮状态都为选中
                    // if (esta2 == true) {
                    //     $('input').prop('checked', true)
                    // } else if (esta2 == false) {
                    //     $('input').prop('checked', false)
                    // }
                    $('input').prop('checked', $('.endnav input').prop('checked'))
                        //直接跟随状态就行
                })
                //当其中三个按钮的状态全部选中的时候，全选按钮的状态要选中,还是个其中的三个按钮设置一个类名（注意属性和类名的区别）
                //获取全选商品的状态
                // $('.ckeb').change(function() {
                //     console.log($('.ckeb').prop('checked')) //全部选中的时候，才为true,//也可以去设置一个参数，每次点击商品按钮的时候，变量变为1，如果加起来总数满足，就说明所有的按钮都被选中
                //     if ($('.ckeb').prop('checked') == true) {
                //         $('input').prop('checked', $('.ckeb').prop('checked'))
                //     } else {
                //         $('.endnav input').prop('checked', $('.ckeb').prop('checked'))
                //         $('.nav input').prop('checked', $('.ckeb').prop('checked'))

            //     }
            // })
            $('.ckeb').change(function() {
                //如果被选中的复选框个数等于4，就说明全部被选中
                // console.log($('.ckeb:checked').length)
                if ($('.ckeb:checked').length == $('.ckeb').length) {
                    $('.endnav input').prop('checked', true)
                    $('.nav input').prop('checked', true)
                } else {
                    $('.endnav input').prop('checked', false)
                    $('.nav input').prop('checked', false)
                }
            })

        })
    </script>
</body>

</html>

jQuery事先淘宝商品数量加减：

   <div class="nav"><input type="checkbox">全选</div>
    <div class="box1"> <input type="checkbox" class="ckeb"><span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"></span>
    </div>
    <div class="box2"><input type="checkbox" class="ckeb"><span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"></span></div>
    <div class="box3"><input type="checkbox" class="ckeb"> <span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"></span></div>
    <div class="box4"><input type="checkbox" class="ckeb"> <span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"></span></div>
    <div class="endnav"><input type="checkbox">全选</div>
            $('.add').click(function() {
                // alert(1)
                //要将获取出来的字符串改为数字型
                var num = parseInt($(this).siblings('.number').val()) + 1
                $(this).siblings('.number').val(num)
                    // alert($(this).siblings('.number').val())
            })
            $('.jian').click(function() {
                // alert(1)
                //要将获取出来的字符串改为数字型,只有当里面的值已经大于了2才能进行减
                if (parseInt($(this).siblings('.number').val()) >= 2) {
                    var num = parseInt($(this).siblings('.number').val()) - 1
                    $(this).siblings('.number').val(num)
                        // alert($(this).siblings('.number').val())
                }

            })

核心：首先声明一个变量，当我们点击＋好，就让这个值++，然后赋值给文本框

细节：

1、只能增加本商品的数量，就是当前+号的兄弟文本框里的值

点了谁就只让他的兄弟也就是对应商品的数量发生变化，（别想着一个商品对应夜歌类名再去判断更改，这样肯定不适用）因为要集体注册时间所以每个商品里面的类名都是一样的。

2、修改表单的值是val（）方法

3、这个变量的初始值应该是这个文本框的值，在这个值的基础上进行++，要获取表单的值

 4、减号对于文本框的值是1的话，那就不能再减了

 ///jQuery实现修改商品小计

 思路：

1、每次点击+或者-，根据文本框的值乘以当前商品的价格，就是商品的小计

2、只能增加本商品的小计，就是当前商品的小计模块

3、修改普通元素的内容是text()方法

4、当前商品的价格，要把￥符号去掉再相乘截取字符串substr()

要搞清除元素之间的父级、兄弟之间的对应关系，注意结构

5、number.toFixed() 确定num保留几位小数

 

            $('.add').click(function() {
                // alert(1)
                //要将获取出来的字符串改为数字型
                var num = parseInt($(this).siblings('.number').val()) + 1
                $(this).siblings('.number').val(num)
                    // alert($(this).siblings('.number').val())
                var a = $(this).siblings('.mony').text()
                    //a.substring(1)将出去￥后的数字取出来
                var b = a.substring(1)
                    //修改里面的值.只乘上初始值
                var c = num * (b / (num - 1))
                    //再将这个值赋值给mony
                $(this).siblings('.mony').text('￥' + c.toFixed(2))
                console.log(c)
            })
            $('.jian').click(function() {
                // alert(1)
                //要将获取出来的字符串改为数字型,只有当里面的值已经大于了2才能进行减
                if (parseInt($(this).siblings('.number').val()) >= 2) {
                    var num = parseInt($(this).siblings('.number').val()) - 1
                    $(this).siblings('.number').val(num)
                        // alert($(this).siblings('.number').val())
                    $(this).siblings('.mony').text('￥' + (num * ($(this).siblings('.mony').text().substring(1)) / (num + 1)).toFixed(2))
                }

            })

 

    <div class="nav"><input type="checkbox">全选</div>
    <div class="box1"> <input type="checkbox" class="ckeb"><span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"> <span class="mony">￥12.60</span></span>
    </div>
    <div class="box2"><input type="checkbox" class="ckeb"><span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"><span class="mony">￥24.80</span></span>
    </div>
    <div class="box3"><input type="checkbox" class="ckeb"> <span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"><span class="mony">￥15.90</span></span>
    </div>
    <div class="box4"><input type="checkbox" class="ckeb"> <span> <input type="button" value="←" class='jian'><input type="text" value="1" class="number"><input type="button" value="→" class="add"><span class="mony">￥20.10</span></span>
    </div>
    <div class="endnav"><input type="checkbox">全选</div>

6、用户也可以直接修改表单里面的值，同样要计算小计，用表单的change时间

7、用最新的表单内的值乘以单价即可，但还是当前商品的小计

                $('.number').change(function() {//所以此时还是需要对表单做出重新修改，单独拎出来显示商品单价}）

                 还是重新开一篇文章把这个案例完整再写一遍

一夕ξ
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript表单全选取消案例
ssjjqqqqqq的博客
11-14 661
一个简单的实用案例。 实现效果： 1、点击全选按钮， 下面的选项按钮全部选中或全取消。 2、只要下面四个按钮都选中了，全选按钮也被选中。 3、下面的选中按钮有一个取消选中，全选按钮也会取消选中。 主要思路： 1、两个事件，一个链接全选按钮，一个链接其他所有小按钮。 2、用checked获取全选按钮当前选中状态，结果为布尔值，true为选中，false为未选中。然后把全选按钮的状态赋值给下面的小按钮。 3、利用循环遍历小面所有小按钮，如果所有小按钮都选中，则全选按钮也会被选中，若有一个没被选中
JavaScript案例-js全选和全不选.zip
02-16
这个"JavaScript案例-js全选和全不选.zip"压缩包文件聚焦于一个常见的交互功能：全选和全不选。在网页表单或数据列表中，用户经常需要一次性选择所有项或取消所有项的选择，这一功能就通过JavaScript来实现。 全选...
表单全选和取消表单全选案例
huihuihou的博客
10-20 295
1.全选与取消全选做法：让下面所有复选框的checked属性（选中状态） 跟随全选按钮即可 2.下面复选框需要全部选中，上面全选才能选中：给下面所有复选框绑定点击事件，每次点击，都会循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中 3.可以设置一个变量来控制全选是否选中
js实现表单全选和取消全选案例
qq_46372132的博客
08-03 165
【代码】js实现表单全选和取消全选案例。
【小白学前端】JS案例：表单全选取消全选
qq_43146801的博客
08-28 714
JS案例：表单全选取消全选
js表单全选和取消全选案例
m0_63400611的博客
11-25 101
<!doctype html> <html> <head> <meta charset="utf-8"> <title>333333</title> <style> .first { } table { text-align: center; width: 180px; border: 1px solid black; cellspacing="0"; } td { .
操作元素之表单全选取消全选案例
m0_72711350的博客
02-06 371
操作元素之表单全选取消全选案例
表单全选取消案例
zhazhali_fenqi的博客
01-11 117
可运行。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } table { border-collapse: collapse; border-spaci
表单全选和取消全选案例
weixin_45995139的博客
09-19 294
题目：通过一个按钮就可以对所有事件进行全部选择和全部取消选择 分析： 1. 全选和取消全选做法：让下面所有复选框的checked 属性(选中状态)跟随全选按钮即可； 2. 下面复选框全部选中时，上面的全选按钮也自动选中：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有没选中的，上面的全选按钮就不被选中； <!DOCTYPE html> <html lang="en"> <head> <me...
表单全选 取消全选的案例
David_zm的博客
12-10 443
* { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border...
JS实现的全选、全不选及反选功能【案例】
10-17
总结来说，实现JS的全选、全不选和反选功能的关键在于理解DOM操作、事件监听以及属性的动态修改。通过这些基础概念，我们可以轻松地处理用户交互，提高网站或应用程序的用户体验。在实际开发中，这种功能广泛应用于...
全选案例&移动选项.rar
06-05
在这个"全选案例&移动选项.rar"压缩包中，我们很显然会探讨如何利用JavaScript来实现HTML元素的全选功能以及动态移动选项的技巧。这些功能在现代Web应用中非常常见，比如在表单处理、数据管理或者用户界面定制时。 ...
jQuery表单全选插件baigoCheckall 0.1.0.zip
05-25
baigoCheckall是一款jQuery表单全选插件。文件结构：1.baigoCheckall.js 全选插件2.jquery.min.js3.demo.html 演示案例4.readme.txt 使用说明
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 186
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 307
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 163
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1271
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
js表单全选和取消案例
01-08
以下是一个JavaScript实现表单全选和取消的案例： ```javascript // 获取全选复选框元素 var selectAllCheckbox = document.getElementById("selectAll"); // 获取所有子复选框元素 var checkboxes = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一夕ξ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值