对于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当中JDBC当中请给出一个SQLServer DataSource and SingleTon例子

    [学习笔记] 5.SQLServer DataSource and SingleTon: import net.sourceforge.jtds.jdbcx.*;import java.sql.*;i ...

  2. WUSTOJ 1338: The minimum square sum（Java）

    题目链接:1338: The minimum square sum Description Given a prime p(p<108), you are to find min{x2+y2}, ...

  3. PowerBuilder学习笔记之删除和加载PBL文件的方法

    删除PBL目录的方法:直接点删除键删除 加载PBL文件的方法:点Browse按钮选择PBL文件

  4. gulp做的前端代码压缩报错，揭示具体错误 信息

    用gulp做的前端代码压缩,今天在打包的时候发现打包出错了.报的错误是--unable to minify JavaScript.但是至于为什么会不能打包,表示很困惑,然后通过一番搜索,最后得出了问题 ...

  5. layer.open自定义弹出位置

    fixed:false,设置top才有效,待测试. 这个设置不起作用 var img = "<img src=\"/_temp/qrcodenet/m/book/book20 ...

  6. jQueryUI的widget的Hello World

    为了看懂jQuery-File-Upload里面的代码,所以学习到这里 //main.js //实践自定义jquery widget,风格1 (function($){ //$.widget('命名空 ...

  7. winfrom 集成krpano 项目 添加折线

    C#.NET WinFrom开发之嵌入Google浏览器 (CefSharp) 引入静态页面 CefWebBrowser = new ChromiumWebBrowser("http://& ...

  8. .net通过网络路径下载文件至本地

    获取网络文件,通过流保存文件,由于上一版存在数据丢失情况,稍微调整了以下. //网络路径文件 string pathUrl = "http://localhost:805/春风吹.mp3&q ...

  9. interface Part3（实现：显示和隐式）

    1. 接口的实现实际上和类之间的继承是一样的,也是重写了接口中的方法,让其有了具体的实现内容. 2. 但需要注意的是,在类中实现一个接口时必须将接口中的所有成员都实现,否则该类必须声明为抽象类,并将接 ...

  10. jQuery 基础知识

    一.序言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后的又一个优秀的JavaScript代码库(JavaScript框架).jQuery设计的宗旨是"W ...