对于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. 稀疏数组（java实现）

    1.稀疏数组 当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保存该数组. 稀疏数组的处理方法是: 1.1记录数组一共有几行几列,有多少个不同的值 1.2把具有不同值的元素的行列 ...

  2. Python14之字符串（各种奇葩的内置方法）

    一.字符串的分片操作 其分片操作和列表和元组一样 str1 = 'keshengtao' str1[2:6] 'shen' str1[:] 'keshengtao' str1[:4] 'kesh' 二 ...

  3. golang之new函数

    另一个创建变量的方法是调用用内建的new函数.表达式new(T)将创建一个T类型的匿名变量,初始化为T类型的零值,然后返回变量地址,返回的指针类型为 *T . p := new(int) // p, ...

  4. 08 IO流（五）——文件字符流FileWriter/FileReader

    对比文件字节流的优势 对于文本文件的数据传输,使用文件字符流,就不用考虑编码转码的问题. 对比文件字节流,在方法上的不同有哪些 文件字符流有append方法: Writer append(char c ...

  5. 立体像对空间前方交会-点投影系数法（python实现）

    一.原理 二.步骤 a.用各自像片的角元素计算出左右像片的旋转矩阵R1和R2. b.根据左右像片的外方位元素计算摄影基线分量Bx,By,Bz. c.逐点计算像点的空间辅助坐标. d.计算投影系数. e ...

  6. javascript 之 扩展对象

    注意点:在js中常见的几种方进行扩展 第一种:ES6提供的 Object.assign(); 第二种:ES5提供的 extend()方法 第三种:Object对象提供的 defineProperty( ...

  7. JQuery 文本框控制验证数字

    $("input[name=XUEFEN]").keypress(function(event) { var keyCode = event.which; if (keyCode ...

  8. Tomcat Lifecycle

    org.apache.catalina.Lifecycle 接口统一管理生命周期,所有生命周期组件都要实现Lifecycle接口. 该接口定义了13个String类型的常量,用于LifecycleEv ...

  9. Dijkstra算法正确性证明

    问题:求图中点1到其他各点的最短距离 策略: 1.把起点1放入初始集合Set中,从剩余的点中,选取到Set(此时Set中只有1个点)距离最近的点,并入集合Set中, 2.从剩余的点中,找经过集合Set ...

  10. 【转载】IIS网站如何同时解析带www和不带www的域名

    针对公网上线的网站系统,很多网站的域名会同时含有带www和不带www的域名解析记录,如果需要同时解析带www和不带www的域名信息,则需要在相应的域名解析平台(如阿里云域名解析平台.腾讯云域名解析平台 ...