JavaScript实现复选框全选功能


Posted in Javascript onApril 11, 2021

本文实例为大家分享了JavaScript实现复选框全选的具体代码,供大家参考,具体内容如下

JavaScript实现复选框全选功能

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            border-spacing: 0;
            /* text-align: center; */
            margin: 100px auto;
            border-collapse: collapse;
        }
        
        table tr:nth-child(n+2)>td {
            text-align: left;
            background-color: rgb(250, 245, 245);
            color: dimgray;
            font-size: 14px;
        }
        
        table tr:nth-child(1) {
            background-color: skyblue;
            color: white;
        }
        
        th,
        td {
            padding: 10px;
            border: 0.5px solid gray;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type="checkbox" name="" id="all"></th>
            <th>商品</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="ip8"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="pro"></td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="air"></td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="watch"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
    </table>

    <script>
        var all = document.getElementById('all');
        var items = document.querySelectorAll('tr>td>input');
        all.onclick = function() {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = this.checked;
            }
        }


        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function() {
                var flag_all = 1;
                for (var j = 0; j < items.length; j++) {
                    if (items[j].checked == 0) {
                        flag_all = 0;
                        all.checked = flag_all;
                        break;
                    }
                }
                all.checked = flag_all;
            }
        }
    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
You might like
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python实现批量修改文件名代码
2017/09/10 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
详解python变量与数据类型
2020/08/25 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
2014国培学习感言
2014/03/05 职场文书
教学改革实施方案
2014/03/31 职场文书
寄语学生的话
2014/04/10 职场文书
小学生优秀评语大全
2014/04/22 职场文书
小学捐书活动总结
2014/07/05 职场文书
电力培训心得体会
2014/09/02 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
接待员岗位职责
2015/02/13 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
贫困证明怎么写
2015/06/16 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Python装饰器的练习题
2021/11/23 Python