对于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. 构建工具-Gulp 相关知识

    layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...

  2. ~postman使用Runner

    1.准备参数的.text文件. postman支持三种参数的方式,分别为.text文件,.csv文件,json文件.此处使用.text文件.编码格式使用utf-8 2.替换请求参数 3.设置Runne ...

  3. 最小轻量级的Istio来了，仅使用流量治理能力

    Istio 1.0.1作为8月份的版本已经发布,主要修复了1.0版本发布以来发现的一些关键Issue.官网的release note(https://istio.io/about/notes/1.0. ...

  4. 修改mysql远程数据库链接密码（转）

    原文:https://blog.csdn.net/jianjiao7869/article/details/81029171 原来root用户有两个,一个只允许localhost登陆,一个可运行所有用 ...

  5. [转载]Python 包管理工具

    [转载]Python 包管理工具 最近由于机缘巧合,使用各种方法安装了一些Python包,所以对Python的包管理开始感兴趣.在网上找到一篇很好的文章:https://blog.zengrong.n ...

  6. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  7. java读取文件的几种方式性能比较

    //普通输入流读取文件内容 public static long checksumInputStream(Path filename) { try(InputStream in= Files.newI ...

  8. Android简单闹钟设置

    利用AlarmManager实现闹钟设置 //设置本地闹钟,actiongString:闹钟标识 setLocAlarm(int week, String actionString) { Calend ...

  9. 如何：确定已安装的 .NET Framework 版本

    用户可在他们的计算机上安装和运行 .NET Framework 的多个版本. 当你开发或部署应用时,你可能需要知道用户的计算机上安装了哪些 .NET Framework 版本. .NET Framew ...

  10. 如何使用python自定义命令

    dir.tree.cd等等,都是我们常见的命令.这些命令是开发者开发出来的,如果我们自己想按照自己的想法开发一个命令,应该怎么做呢? 以python语言来实现,问题就是:如何使用python自定义命令 ...