HTML+CSS+JavaScript：全选与反选案例

最新推荐文章于 2024-04-29 17:42:02 发布
最新推荐文章于 2024-04-29 17:42:02 发布
阅读量621 收藏 4
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/132075580
版权

一、需求

1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中

2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中

 二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

<!DOCTYPE html>

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>
    <script>
       
    </script>
</body>

</html>

三、算法思路

1、获取相关元素

2、为全选框绑定鼠标点击事件，当点击事件触发时，将下面三个复选框的状态设置为与全选框一致

3、利用事件委托为下面三个复选框绑定鼠标点击事件，当任意一个复选框触发点击事件时，判断下面三个复选框是否全为选中状态，若全选中，则将全选框设置为全选，否则不设置。

四、完整代码

<!DOCTYPE html>

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>
    <script>
        //获取元素
        const checkAll = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')

        //业务模块一：单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中
        checkAll.addEventListener('click', function () {
            for (let i = 0; i < cks.length; i++)
                cks[i].checked = this.checked
        })

        //业务模块二：当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中
        //利用事件委托绑定事件
        const table=document.querySelector('table')
        table.addEventListener('click',e=>{
            if(e.target.tagName==='INPUT'){
                checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
                //.ck:checked是CSS伪类选择器，可以获取复选框中checked为true的选择器
            }
        })
    </script>
</body>

</html>

早八睡不醒午觉睡不够的程序猿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 复选按钮 全选,JS实现复选按钮控件全选和批量操作
weixin_42501270的博客
06-10 1247
2.1 准备数据新建普通报表，新建数据库查询数据集 ds1，SQL 语句为：SELECT * FROM Sales2.2 设计表格如下图设计填报模板的表格样式，其中 A3 单元格的左父格为 B3。A2、A3 单元格中添加「复选按钮控件」，C1、D1、E1、F1、G1、C3、D3、E3、F3、G3 单元格中添加「文本控件」，H5单元格添加按钮控件。给A3的复选按钮控件设置控件名称：box。该名称可自...
js 实现全选和反选 （使用了click事件监听）
m0_69095153的博客
08-28 342
【代码】js 实现全选和反选 （使用了click事件监听）
html页面列表一键全选选,JSP页面中，列表的全选以及多选后的操作
weixin_35573869的博客
06-03 801
可以实现全选、反全选。以及对选中的多个列表项，进行相同的处理。例子中为删除选中的行。代码如下：pageEncoding="utf-8"%>全选以及批量删除function allSelected() {var handleEl = document.getElementById("pcheckedall");var checkBoxList = document.getElementsByN...
Vue+ElemnetUI 表格实现全选、反选、清空
最新发布
top_yisi的博客
04-29 705
当你在写vue2+elementui上的表格全选、反选操作遇到问题时，看看这个，也许对你有帮助。
前端DOM经典案例：表格中行的全选和全不选
GJW966288的博客
10-31 299
前端DOM经典案例：表格中行的全选和全不选
表单全选与取消选择
柠夏
04-01 520
<!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>表单
js html css实现复选框全选与反选
11-23
html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="js,笔试题目" /> <style type="text/...
javaScript checkbox 全选/反选及批量删除
10-29
javaScript checkbox 全选/反选及批量删除实现代码，需要的朋友可以参考下。
纯javascript实现选择框的全选与反选功能
12-29
HTML部分 <input type=checkbox> <input type=checkbox> <input type=checkbox> <input type=checkbox> <input type=checkbox> <input type=checkbox...
javascript checkbox全选和反选的简单实现
10-19
主要介绍了javascript checkbox全选和反选的简单实现的相关资料,需要的朋友可以参考下
html页面列表一键全选选,JQuery控制Html页面Checkbox全选和全不选
weixin_32652107的博客
06-03 1183
说明：Checkbox的全选和全不选应用较为普遍，网上的资料大多数都是原生JS的实现方式，大家你超我，我超你，没意思！今天用JQuery试着写了一下，采用了新的角度实现，供大家参考一下，直接上代码，解释在代码里都写了！1、Html页面代码姓名手机号码部门张三13000000001技术部李四13000000002技术部王五13000000003技术部赵六13000000004人事部田七1300000...
纯css实现全选效果
07-19
css实现全选，带样式，非常不错喔css实现全选，带样式，非常不错喔css实现全选，带样式，非常不错喔
html全选反选
12-06
很简单的html全选反选，适合刚开始学习html的同学，非常实用。
HTML多选框，全选，多选
热门推荐
anzhen9的博客
08-17 1万+
项目中用到的，结合网上看的一些例子，整了一个，多选全选的玩意儿，如有雷同纯属巧合（手动滑稽） 没有做反选操作相关的功能 用jquery整的 然后对应的全选checkbox 再然后就是那一堆的多选checkbox了 来个效果的。。。。
JS全选与反选
qq_34082921的博客
09-10 1550
【代码】JS全选与反选的代码实现。
html选择框自动选择,html如何实现表单的选择框效果？
weixin_34118910的博客
05-30 936
一、选择框种类与语法html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。语法：二、html单选框样式html单选框代码：单选框你是否喜欢运动？喜欢不喜欢无所谓效果图：1.jpg从上例可以看出：当type="radio"时，选择框定义为单选框；name属性：定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项...
html 简单 全选 按钮
h70614959的专栏
10-17 4542
很简单的"全选" 按钮 实现： //全选 function selectAll(obj) { var uploadIds = document.getElementsByName("uploadIds"); var isCheck = obj.checked; for (var i = 0; i < uploadIds.length;
html复选框全选
Sugar_i的博客
03-21 554
https://www.cnblogs.com/xiaofox0018/p/6243723.html
点击button按钮实现全选_全选按钮（简单实现）
weixin_39664774的博客
12-29 1668
案例分析1.当全选按钮选中时，下面的按钮全部点亮，反之全灭。(利用checked)//找到全选按钮和所有单选按钮var j_cbAll = document.querySelector('#j_cbAll');var j_tbs = document.querySelector('#j_tb').querySelectorAll('input');j_cbAll.onclick = functio...
a-checkbox-group反选和全选
08-25
可以通过在el-checkbox-group上添加一个额外的checkbox来实现全选和反选功能。通过点击这个额外的checkbox来控制el-checkbox-group中所有的checkbox的选中状态。当点击全选checkbox时，遍历el-checkbox-group中的所有checkbox，将它们的选中状态设置为true；当点击反选checkbox时，遍历el-checkbox-group中的所有checkbox，将它们的选中状态取反。这样就可以实现el-checkbox-group的反选和全选功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue checkbox-group的全选和反选](https://blog.csdn.net/qq_36707668/article/details/122010014)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值