【JavaScript】实现全选复选框功能

最新推荐文章于 2024-07-30 22:36:34 发布
最新推荐文章于 2024-07-30 22:36:34 发布
阅读量425 收藏
点赞数 2
分类专栏： html web 前端 文章标签： javascript css3 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44587107/article/details/120922948
版权
web 同时被 3 个专栏收录
47 篇文章 1 订阅
订阅专栏
html
44 篇文章 0 订阅
订阅专栏
前端
41 篇文章 0 订阅
订阅专栏 
<!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>全选与取消全选</title>
</head>

<body>
    <style>
        .container {
            margin: 200px auto;
            width: 600px;
            border: 3px solid green;
            padding: 10px;
            text-align: center;
        }

        table {
            width: 600px;
            background-color: rgb(216, 193, 230);
        }

        table:hover {
            cursor: default;
        }

        tr {

            align-content: center;
        }

        thead {
            background-color: rgb(105, 91, 185);
        }

        td {
            border: 1px solid rgba(70, 124, 70, 0.438);
            align-content: center;

        }

        tbody>tr:hover {
            background-color: rgb(161, 156, 226);
        }
    </style>

    <div class="container">
        <table cellspacing="0" cellpadding="0" text-align="center">
            <thead>

                <tr>
                    <td text-align="center">
                        <input type="checkbox" name="" id="checkbox_all" value="ALL">
                    </td>

                    <td text-align="center">HEAD</td>
                    <td text-align="center">Head</td>
                    <td text-align="center">HEAD</td>
                </tr>
            </thead>
            <tbody id="tbody_Id">
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    <td>td1</td>
                    <td>td2</td>
                    <td>td3</td>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- -------------------------------------------------------------------------------- -->
    <script>
        var all_Btn = document.getElementById("checkbox_all");
        var per_Btn = document.getElementById("tbody_Id").getElementsByTagName('input');

        all_Btn.onclick = function () {
            /*该函数实现All复选框控制所有的子复选框*/
            for (var i = 0; i < per_Btn.length; i++) {
                per_Btn[i].checked = this.checked;
            }
        }

        /*该函数实现子复选框的总状态和 控制All复选框*/
        for (var i = 0; i < per_Btn.length; i++) {
            per_Btn[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < per_Btn.length; i++){
                    if (!per_Btn[i].checked) {
                        flag = false;
                    }
                }
                all_Btn.checked = flag;    
            }            
        }
    </script>
</body>

</html>
玖夜Kty
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现复选框功能
xiao_xiao_tian的博客
05-22 1236
AllChecked() {//完成复选框全选与取消全选功能 checkedAll = document.getElementById("checkedAll");//有全选功能复选框 checkbox = document.getElementsByName("checkbox");//其余的复选框 ifChecked=checkedAll.checked; //判定是否勾线复选框 //完成全选和取消全选功能 for (i = 0; i &
利用Bootstrap实现表格复选框checkbox全选
08-31
请注意，我们在`<thead>`中的第一列添加了一个空的`<th>`元素，用于放置全选复选框。在`<tbody>`中，每行的第一列我们添加了一个单独的复选框。 接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选...
利用JavaScript实现全选复选功能
W2399755751的博客
01-20 413
1.点击全选按钮全部选中,再次点击则取消全部选中。2.当点满复选框时,全选框自动勾选,否则不会勾选。点满复选框自动勾选全选框功能。点击全选实现全部勾选功能。
JavaScript实现复选框全选
weixin_34318326的博客
04-12 622
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery实现复选框全选和取消全选功能
牧小七的博客
04-25 734
使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选。
JavaScript 复选框全选功能 案例
刘伟佳的博客
04-18 795
功能描述 实现一个多栏目复选框的全选，全不选和反选功能。 分析 模块一思路代码模块1 模块二思路代码模块2 模块三思路代码模块3 代码 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 代码汇总 ...
JavaScript 实现表格复选框全选
qq_36131739的博客
12-29 2565
效果如图所示： 当用户选择全选按钮时，所有复选框被选中。  当任一复选框被取消选中，则全选按钮被取消选中。具体代码如下所示：cameraMng.html(主要代码) IP地址 端口 设备型号 厂商 协议类型 账号 密码 192.168.2.2 80 IPC-HF8229F Dahua Onvif admin admin
JavaScript操作全选框(表单复选框)
hpz233的博客
11-03 354
【代码】JavaScript操作全选框(表单复选框)
php 复选框全选和取消,JavaScript实现复选框全选和取消全选
weixin_32512451的博客
03-28 348
JS网页–全选和取消全选，供大家参考，具体内容如下表格，初始状态下复选框都是未选中状态，选中表头的复选框后，下面几个复选框变为选中状态，取消表头复选框选中状态后，下面几个复选框选中状态也随之取消；下面的几个复选框同时选中时，表头的复选框也随之选中。全选和取消全选table {width: 200px;border-collapse: collapse;margin: 100px auto;}tab...
Jquery实现多个表格的全选复选框功能
qq_44732752的博客
03-17 1308
实现多个表格的复选框功能， HTML+CSS部分 <style> .kctc-table tbody { width: 1180px; background-color: #fff; } .kctc-table tbody tr { width: 1180px; display: flex; } .kctc-table thead { width: 1180px;
javascript 实现复选框全选/取消功能
03-23
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
Js实现复选框的全选、全不选反选功能代码实例
10-15
总结来说，通过JavaScript，我们可以轻松实现复选框的全选、全不选和反选功能，提高用户体验。在实际项目中，可以根据需求调整代码，比如增加更多的复选框，或者将这些功能封装成一个通用的函数，便于复用。同时，还...
复选框全选与全不选操作实现思路
09-05
在网页交互设计中，复选框（Checkbox...总之，使用JavaScript实现复选框的全选与全不选功能是网页交互设计中的一项基础技能。通过理解上述代码和实现思路，开发者可以轻松地在自己的项目中应用这一功能，提升用户体验。
用Javscript实现表单复选框的全选功能
10-30
### 使用JavaScript实现表单复选框的全选功能 在Web开发中，表单是非常重要的组成部分之一，尤其是在涉及用户交互的场景下。其中，复选框（Checkbox）是一种常用的控件，用于允许用户进行多项选择。为了提高用户...
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 268
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 863
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 203
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【Vue3】自定义组件
最新发布
又言又语
07-30 423
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
layui treeGrid通过js代码全选复选框
06-10
您可以使用以下代码来实现 layui treeGrid 全选复选框： ```javascript // 全选复选框 $('#checkAll').on('click', function() { var checked = $(this).prop('checked'); $('.layui-table-body .layui-form-checkbox').each(function() { $(this).prop('checked', checked); }); }); // 监听复选框变化 $('.layui-table-body').on('click', '.layui-form-checkbox', function() { var checked = true; $('.layui-table-body .layui-form-checkbox').each(function() { if (!$(this).prop('checked')) { checked = false; } }); $('#checkAll').prop('checked', checked); }); ``` 其中，`#checkAll` 是全选复选框的 ID，`.layui-table-body` 是 layui treeGrid 的表格内容区域的 class。您可以根据实际情况修改这些选择器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值