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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
基于JS实现父组件的请求服务过程解析
Oct 14 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
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
摄影实习自我鉴定
2013/09/20 职场文书
入党积极分子介绍信
2014/01/17 职场文书
企业宣传方案
2014/03/04 职场文书
企业挂职心得体会
2014/09/10 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
计划生育责任书
2015/05/09 职场文书
九年级英语教学反思
2016/02/15 职场文书
公开致歉信
2019/06/24 职场文书
python实现简单的井字棋
2021/05/26 Python