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 Autocomplete 结合asp.net使用要点
Oct 29 Javascript
validator验证控件使用代码
Nov 23 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jquery获取radio值实例
Oct 16 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
Ajax基础知识详解
Feb 17 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
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
Php+SqlServer实现分页显示
2006/10/09 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
跟老齐学Python之永远强大的函数
2014/09/14 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python实现随机漫步算法
2018/08/27 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
用python计算文件的MD5值
2020/12/23 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
司机的工作范围及职责
2013/11/13 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
学习交流会主持词
2014/04/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle