对于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. thinkphp5.0数据导出excel表格

    第一步.创建Model类文件(名称自定) 第二步.在类中写入以下代码 <?php namespace Admin\admin\model; use think\Model; class Mark ...

  2. MySQL事务原理浅析

    前言​ 因为自己对数据的可靠性,可用性方面特别感兴趣,所以在MySQL事务方面看了很多资料,也看了很多博客,所以想到自己也写一篇博客整理整理自己所学内容,尽量用自己的语言解释得通俗易懂. 事务经典场景 ...

  3. try except 异常捕获的方法、断言的使用

    except as e中的'e'的作用总结 - 2puT - CSDN博客 Python使用try except处理程序异常的三种常用方法分析 Python3和Python2 异常处理except的不 ...

  4. 腾讯云开发微信小程序使用体验

    主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...

  5. Java 处理异常 9 个最佳实践，你知道几个？

    1. 在Finally中清理资源或者使用Try-With-Resource语句 使用Finally Java 7的Try-With-Resource语句 2. 给出准确的异常处理信息 3. 记录你所指 ...

  6. 调用WebService时加入身份验证，以拒绝未授权的访问

    众所周知,WebService是为企业需求提供的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务.但在有些时候的某些应用服务不希望被未授权访问,那么此时我们可以一下几种 ...

  7. 使用dockers安装MySQL

    事前准备 关闭selinux setenforce 0 vim /etc/sysconfig/selinux SELINUX=disabled # 若不关闭,使用docker启动mysql5.7镜像容 ...

  8. DropDownList下拉控件

    <asp:DropDownList    ID="DropDownList1" runat="server" Width="177px" ...

  9. Java 之 递归

    一.概述 递归:指在当前方法内调用自己的现象. 递归的分类: 递归分为两种,直接递归和简介递归 直接递归称为方法自身调用自己 间接递归可以 A 方法调用 B 方法,B 方法调用 C 方法,C 方法调用 ...

  10. 记一次靠谱的nvm在window系统的安装

    最近电脑系统重装,电脑的环境配置也清空掉了,今天想写点代码,突然发现什么环境也没了,又要重新配置了. 安装node环境的话,完全可以直接去node的官网下载安装包安装,也不是特别复杂,但是由于之前跑的 ...