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.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
原生js调用json方法总结
Feb 22 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python统计一个文本中重复行数的方法
2014/11/19 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
生产内勤岗位职责
2013/12/07 职场文书
社区八一活动方案
2014/02/03 职场文书
课程设计的心得体会
2014/09/03 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android