对于JS初学者来说，一个完整的购物车实现还是挺难的，逻辑功能挺多。写出完整功能，能提升不少JS基础，下面实现购物车全选多选按钮功能：

首先HTML及CSS部分：

        <style>

            table {

                border-collapse: collapse;

            }

            td {

                border: 1px solid #000000;

                width: 100px;

                height: 30px;

                text-align: center;

            }

        </style>

    <body>

        <table>

            <tr>

                <td>

                    <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check0" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check1" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check2" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check3" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check4" type="checkbox">

                </td>

            </tr>

        </table>

然后是JS部分：

<script>

            var allcheck = document.getElementById("allCheck")　　//获取全选框

            allcheck.addEventListener("click",clickHandler)　　　　//给全选框按钮添加点击属性

            for(var i=0;i<5;i++){

                var check = document.getElementById("check"+i)　　//遍历每个多选按钮

                check.addEventListener("click",clickHandler);　　　　//给每个多选框添加点击属性

            }

            function clickHandler(){

                if(allcheck === this){　　　　//进行判断 如果你点击的是全选按钮 那么多选按钮也就全部被选中

                    for(var i=0;i<5;i++){

                        var check = document.getElementById("check"+i);　　　　

                        check.checked = allcheck.checked;

                    }

                    return;　　　//结束

                }

                for(var j=0;j<5;j++){

                    var checks = document.getElementById("check"+j);

                    if(!checks.checked){　　　　这一部分代码用来多选按钮是否被选中 遍历所有的多选按钮 如果有一个多选按钮没有被选中 那么全选按钮就不会被选中

                        allcheck.checked = false;

                        return;　　　　//结束

                    }

                }

                allcheck.checked = true;　　　　//不好理解 看不懂可以一步一步运行代码

            }

        </script>

全部代码：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            table {

                border-collapse: collapse;

            }

            td {

                border: 1px solid #000000;

                width: 100px;

                height: 30px;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <table>

            <tr>

                <td>

                    <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check0" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check1" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check2" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check3" type="checkbox">

                </td>

            </tr>

            <tr>

                <td>

                    <input id="check4" type="checkbox">

                </td>

            </tr>

        </table>

        <script>

            var allcheck = document.getElementById("allCheck")

            allcheck.addEventListener("click",clickHandler)

            for(var i=0;i<5;i++){

                var check = document.getElementById("check"+i)

                check.addEventListener("click",clickHandler);

            }

            function clickHandler(){

                if(allcheck === this){

                    for(var i=0;i<5;i++){

                        var check = document.getElementById("check"+i);

                        check.checked = allcheck.checked;

                    }

                    return;

                }

                for(var j=0;j<5;j++){

                    var checks = document.getElementById("check"+j);

                    if(!checks.checked){

                        allcheck.checked = false;

                        return;

                    }

                }

                allcheck.checked = true;

            }

        </script>

    </body>

</html>

效果如下：

原生JS实现购物车全选多选按钮功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  3. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  4. 原生js中实现全选和反选功能

    <!DOCTYPE html>      <html>      <head lang="en">          <meta char ...

  5. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  6. 原生js 实现购物车价格和总价 统计

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生js实现九宫格,全解析

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 原生js实现浏览器全屏和退出全屏

    全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...

  9. 原生js实现jquery库中部分事件的功能（jquery库封装二）

    继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...

随机推荐

  1. u盘传输文件时提示过大

    (无需格式化U盘) 1.拷贝大文件时提示目标文件系统过大,无法复制 2.查U盘,发现剩余空间足够: 3.分析原因,是由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件: 4. ...

  2. MappingJackson2JsonView——model转成json

    一.ajax请求,返回ModelAndView对象,结果报404: @RequestMapping(value = "/video") public ModelAndView jj ...

  3. WUSTOJ 1296: JAM计数法（Java）

    题目链接:

  4. 【Linux】一步一步学Linux——Unix发展史(02)

    目录 00. 目录 01. 请参考Unix传奇 02. 03. 00. 目录 @ 本博客后面会更新 01. 请参考Unix传奇 链接: https://coolshell.cn/articles/23 ...

  5. 在uboot里面添加环境变量使用run来执行

    在uboot里面添加环境变量使用run来执行 本文链接:https://blog.csdn.net/u010979030/article/details/41038259 Author:杨正  Dat ...

  6. X64驱动：内核操作进线程/模块

    注意:下面的所有案例必须使用.C结尾的文件,且必须在链接选项中加入 /INTEGRITYCHECK 选项,否则编译根本无法通过(整合修正,Win10可编译,须在测试模式下进行),内核代码相对固定,如果 ...

  7. 利用 nodejs 解析 m3u8 格式文件，并下 ts 合并为 mp4

    利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4 以前看视频的时候,直接找到 video标签,查看视频地址,然后下载下来.. 后来发现,好多 video 标签打开元素审查,如下 ...

  8. Liar CodeForces - 822E (dp,后缀数组)

    大意: 给定串$s,t$, 给定整数$x$, 求判断$t$是否能划分为至多$x$段, 使这些段在$s$中按顺序,不交叉的出现. 设$dp_{i,j}$表示$s$匹配到$i$位, 划分了$j$段, 匹配 ...

  9. K380键盘IOS使用

  10. element-ui 省市区联动组件 el-cascader

    <el-form-item label="省市 :" prop="description"> <el-cascader size=" ...