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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
Add a Formatted Table to a Word Document
Jun 15 Javascript
JS Array对象入门分析
Oct 30 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
js操作二级联动实现代码
Jul 27 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP异常处理Exception类
2015/12/11 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python使用epoll实现服务端的方法
2018/10/16 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
基于python plotly交互式图表大全
2019/12/07 Python
python中有关时间日期格式转换问题
2019/12/25 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
深圳茁壮笔试题
2015/05/28 面试题
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
就业协议书范本
2014/10/08 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
复试通知单模板
2015/04/24 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP