位置: IT常识 - 正文

原生js实现复选框(全选/全不选/反选)效果【含完整代码】(原生js操作数组的方法)

编辑:rootadmin
原生js实现复选框(全选/全不选/反选)效果【含完整代码】 实现效果

推荐整理分享原生js实现复选框(全选/全不选/反选)效果【含完整代码】(原生js操作数组的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:原生js设置select选中,原生js实现promise,原生js写选项卡,原生js赋值,原生js操作数组的方法,原生js操作dom,js原生选择器,原生js设置select选中,内容如对您有帮助,希望把文章链接给更多的朋友!

原生js实现复选框(全选/全不选/反选)效果【含完整代码】(原生js操作数组的方法)

1、勾选后,可以获取到所勾选的值组成的数组,并展示到页面; 2、全部勾选,以及取消勾选时,要相应地更新全选框的状态及文字显示; 3、点击反选,将所有选项的选择状态置换,并相应改变全选框的状态;

实现思路1、获取所勾选的值组成的数组

定义一个数组checkValues,存放用户所勾选的内容。 再定义一个函数getValues(),遍历选框数组checks,如果选框checks[i]被选择,则将value加入数组。遍历完成后,使用innerText属性将数组展示到页面中。 捕获选框的onclick点击事件,当用户点击时,执行getValues()。

// 显示选择内容的文字 var checkText = document.getElementById("check_text"); // 定义选择内容的数组 var checkValues = []; // 根据复选框组勾选状态,获取当前已选择的值并渲染至页面 function getValues(){ // 数组置空 checkValues=[]; // 依次检查是否勾选,将勾选的内容放进数据 for(var i = 0; i < checks.length; i++){ if(checks[i].checked){ checkValues.push(checks[i].value); } } // 将选择的数组中的内容渲染至页面 checkText.innerText = JSON.stringify(checkValues); checkText.style.color = "#09f" }2、更新全选框状态及文字显示

定义一个判断是否全选的函数isCheckAll(),遍历选框数组checks,如果全部被选择,返回true,否则返回false。 捕获选框的click点击事件,当用户点击时,判断isCheckAll()的值,若为真,勾上全选框,并且更新提示文字;若为假,不勾选全选框,文字也为默认的“全选”。

// 全选input勾选框 var checkAll = document.getElementById("checkAll"); // 检查列表复选框是否全部勾选 function isCheckAll(){ for(var i = 0; i < checks.length; i++){ if(!checks[i].checked){ return false; } } return true; } // 根据全选框状态改变文字 function changeText(){ // 如果全选框是勾选的状态,提示文字变为“全不选” if(checkAll.checked){ document.querySelector("dl>dt>label").innerHTML = "全不选"; }else{ document.querySelector("dl>dt>label").innerHTML = "全选"; } }3、反选

当反选按钮被点击时,遍历复选框,将选择状态全部置反,然后判断状态是否为全选

// 点击“反选”,所有复选框状态取反 ReverseCheck.onclick = function(){ for(var i = 0; i < checks.length; i++){ checks[i].checked = !checks[i].checked; } // 若点击反选时,全选框为选中状态,则取消选中 if(checkAll.checked){ checkAll.checked = false; } // 模拟列表点击事件,若反选后,复选框全部选中,则选中全选框,更改文字 dd.click(); }完整代码<!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>复选框(checkbox)全选/全不选/反选</title> <style> body, dl, dt, dd, p { margin: 0; padding: 0; } body { font-family: Tahoma; font-size: 12px; } label, input, a { vertical-align: middle; } label { padding: 0 10px 0 5px; } a { color: #09f; text-decoration: none; } a:hover { color: red; } dl { width: 120px; margin: 10px auto; padding: 10px 5px; border: 1px solid #666; border-radius: 5px; background: #fafafa; } dt { padding-bottom: 10px; border-bottom: 1px solid #666; } dt label { font-weight: 700; } p{ text-align: center; } dd > p { margin-top: 10px; text-align: left; } </style></head><body> <dl> <dt> <input type="checkbox" id="checkAll" /> <label>全选</label> <a href="javascript:;">反选</a> </dt> <dd> <p> <input type="checkbox" name="item" value="one"/> <label>one</label> </p> <p> <input type="checkbox" name="item" value="two"/> <label>two</label> </p> <p> <input type="checkbox" name="item" value="three"/> <label>three</label> </p> <p> <input type="checkbox" name="item" value="four"/> <label>four</label> </p> <p> <input type="checkbox" name="item" value="five"/> <label>five</label> </p> <p> <input type="checkbox" name="item" value="six"/> <label>six</label> </p> <p> <input type="checkbox" name="item" value="seven"/> <label>seven</label> </p> <p> <input type="checkbox" name="item" value="eight"/> <label>eight</label> </p> <p> <input type="checkbox" name="item" value="nine"/> <label>nine</label> </p> <p> <input type="checkbox" name="item" value="ten"/> <label>ten</label> </p> </dd> </dl> <p>您所选择的内容包括:<span id="check_text"></span></p><br> <p> 1、切换全选/全不选文字; <br /> <br /> 2、根据选中个数更新全选框状态; </p></body><script> // 全选input勾选框 var checkAll = document.getElementById("checkAll"); // 复选框组 var checks = document.querySelectorAll("dd > p > input"); // 选择列表 var dd = document.querySelector("dd"); // 反选 var ReverseCheck = document.querySelector("dl > dt > a") // 显示选择内容的文字 var checkText = document.getElementById("check_text"); // 定义选择内容的数组 var checkValues = []; // 检查列表复选框是否全部勾选 function isCheckAll(){ for(var i = 0; i < checks.length; i++){ if(!checks[i].checked){ return false; } } return true; } // 根据全选框状态改变文字 function changeText(){ // 如果全选框是勾选的状态,提示文字变为“全不选” if(checkAll.checked){ document.querySelector("dl>dt>label").innerHTML = "全不选"; }else{ document.querySelector("dl>dt>label").innerHTML = "全选"; } } // 根据复选框组勾选状态,获取当前已选择的值并渲染至页面 function getValues(){ // 数组置空 checkValues=[]; // 依次检查是否勾选,将勾选的内容放进数据 for(var i = 0; i < checks.length; i++){ if(checks[i].checked){ checkValues.push(checks[i].value); } } // 将选择的数组中的内容渲染至页面 checkText.innerText = JSON.stringify(checkValues); checkText.style.color = "#09f" } // 列表被点击 dd.onclick = function(){ // 检查是否已勾选所有复选框,更改全选框状态 if(isCheckAll()){ checkAll.checked = "true"; }else{ checkAll.checked = false; } // 根据全选框状态改变文字 changeText(); // 获取当前所选择的内容并渲染至页面 getValues(); } // 全选框被点击 checkAll.onclick = function(){ // 所有复选框的状态跟全选框的状态保持一致 for(var i = 0; i < checks.length; i++){ checks[i].checked = checkAll.checked; } // 根据全选框状态改变文字 changeText(); // 获取当前所选择的内容并渲染至页面 getValues(); } // 点击“反选”,所有复选框状态取反 ReverseCheck.onclick = function(){ for(var i = 0; i < checks.length; i++){ checks[i].checked = !checks[i].checked; } // 若点击反选时,全选框为选中状态,则取消选中 if(checkAll.checked){ checkAll.checked = false; } // 若反选后,复选框全部选中,则选中全选框,更改文字 dd.click(); }</script></html>
本文链接地址:https://www.jiuchutong.com/zhishi/300382.html 转载请保留说明!

上一篇:目标检测:Faster-RCNN算法细节及代码解析(目标检测yolo算法)

下一篇:使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」(nodejs搭建http服务器接收请求)

  • 如何取消开机密码(如何取消开机密码win7)

    如何取消开机密码(如何取消开机密码win7)

  • 淘宝付了定金又不想要的东西 怎么办(淘宝付了定金之后就一定有货吗)

    淘宝付了定金又不想要的东西 怎么办(淘宝付了定金之后就一定有货吗)

  • 图片打印不出来怎么回事(图片打印不出来怎么设置)

    图片打印不出来怎么回事(图片打印不出来怎么设置)

  • 手机teamviewer无法建立连接(手机teamviewer无法连接伙伴原因)

    手机teamviewer无法建立连接(手机teamviewer无法连接伙伴原因)

  • 苹果xr广角镜头在哪(苹果xr广角镜头怎么设置)

    苹果xr广角镜头在哪(苹果xr广角镜头怎么设置)

  • 电脑显示器模糊是坏了吗(电脑显示器模糊怎么调)

    电脑显示器模糊是坏了吗(电脑显示器模糊怎么调)

  • 爱奇艺退出登录对方知道吗(爱奇艺退出登录后还有记录吗)

    爱奇艺退出登录对方知道吗(爱奇艺退出登录后还有记录吗)

  • 网易云上传新歌审核要多久(网易云 上传歌曲)

    网易云上传新歌审核要多久(网易云 上传歌曲)

  • 安装打印机驱动usb连接不上(安装打印机驱动找不到设备)

    安装打印机驱动usb连接不上(安装打印机驱动找不到设备)

  • 还原系统设置会怎样(还原系统设置会发生什么)

    还原系统设置会怎样(还原系统设置会发生什么)

  • 8g运行和12g运行有什么区别吗(8g运行和12g运行在安卓机上的区别)

    8g运行和12g运行有什么区别吗(8g运行和12g运行在安卓机上的区别)

  • 定位服务是什么意思(手机定位服务是什么)

    定位服务是什么意思(手机定位服务是什么)

  • 抖音币和抖音浪是一样的吗(抖币和音浪一样吗)

    抖音币和抖音浪是一样的吗(抖币和音浪一样吗)

  • 微信最高可以发多大的文件(微信最高可以发多大的视频)

    微信最高可以发多大的文件(微信最高可以发多大的视频)

  • 微信单删和互删的区别(微信单删和互删的资料页面)

    微信单删和互删的区别(微信单删和互删的资料页面)

  • word中竖线符号怎么打(word中竖线符号怎么去掉)

    word中竖线符号怎么打(word中竖线符号怎么去掉)

  • 微信怎么让人看到电话(微信怎么让人看不到朋友圈封面和签名)

    微信怎么让人看到电话(微信怎么让人看不到朋友圈封面和签名)

  • 荣耀10如何设置锁屏图片(荣耀10如何设置桌面时间)

    荣耀10如何设置锁屏图片(荣耀10如何设置桌面时间)

  • iqoo怎样分屏(iqoo怎样分屏抖音)

    iqoo怎样分屏(iqoo怎样分屏抖音)

  • iphonex停产原因(iphonex停产了没)

    iphonex停产原因(iphonex停产了没)

  • 全民k歌怎么和好友同时合唱(全民k歌怎么和好友一起连麦)

    全民k歌怎么和好友同时合唱(全民k歌怎么和好友一起连麦)

  • 小米9如何分屏(小米如何分屏多任务)

    小米9如何分屏(小米如何分屏多任务)

  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起(前端vue后端node)

    若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起(前端vue后端node)

  • 2022年OK源码中国教你如何在国内使用谷歌的reCaptcha验证码服务-OK源码中国(okhttp源码)

    2022年OK源码中国教你如何在国内使用谷歌的reCaptcha验证码服务-OK源码中国(okhttp源码)

  • 研发项目帐务处理方案
  • 个体工商户怎么变更法人
  • 小规模纳税人缴纳增值税怎么做账
  • 建筑服务预征缴纳税款本期实际抵减税额怎么填
  • 如何判断开专票还是普票
  • 哪些小规模纳税人可以自行开具增值税
  • 计提折旧不考虑所得税吗
  • 汇票 到期
  • 进项税认证怎么做分录
  • 不计提税费可以吗
  • 股权转让印花税税率
  • 自行建造厂房一座,现已完工,经验收后交付费用
  • 对公直接转私人卡会怎么样
  • 怎么向个体工商户贷款
  • 确认无法回收的应收账款会计分录
  • 工商年报社保需要多少钱
  • 送积分怎么做账
  • 苹果macmimi
  • 个税手续费返还要交企业所得税吗
  • 小规模公司减免的增值税怎么做账
  • 开发票时已交的税金怎么做帐?
  • 事业单位研究开题报告
  • win10系统更新出现错误代码
  • 企业预收账款缴哪些税
  • PHP:mb_ereg_search_regs()的用法_mbstring函数
  • 国有土地使用权租赁
  • 在linux系统中 用来存放系统所需
  • windows无法自动检测网络代理设置该怎么办
  • linux常见的文本编辑工具有哪些
  • PHP:mcrypt_module_get_supported_key_sizes()的用法_Mcrypt函数
  • 工程施工和工程结算科目
  • 准备动作怎么做
  • 对个别报表中处置收益的归属期间进行调整
  • php正则表达式验证用户名
  • 转让企业要交什么税
  • 营业税借方表示什么
  • 建筑业先预缴还是先扣税
  • 公司账户转钱到私人账户要扣税吗
  • 个人所得税汇算清缴
  • 数据库维护工作主要包括哪些内容
  • access不能打开数据库
  • 政府补助分类有几种
  • 不动产经营租赁发票开具注意
  • 出借和出租包装物会计分录是什么
  • 开劳务发票需要的资料是?
  • 个体户超额
  • 建筑行业怎么确认收入
  • 研发支出属于什么要素
  • 研发支出的会计处理原则
  • 溢价发行债券取得的收益应如何处理
  • 股权转让怎么入账
  • 应付款多付了不可退回怎么做会计分录
  • 永续债利息可以抵税吗
  • 资产负债表和利润表的利润不一致
  • 生产性生物资产账务处理
  • 交易性金融资产公允价值变动计入
  • 售后回租融资是利好还是利空
  • 公司增资需要什么流程呢 最新
  • 专业收账公司合法吗
  • mysql 5.7.5 m15 winx64.zip安装教程
  • mysql5.7.26启动失败
  • ubuntu的软件
  • mac系统自带的杀毒软件
  • xp系统如何删除用户
  • winxp怎么做系统
  • mac搜索app
  • libegl.dll病毒
  • mm server conection failed
  • linux怎么查看
  • Win8用Ribbon Disabler工具关闭Ribbon功能区界面
  • android程序的基本结构
  • cocos2djs
  • unity编译原理
  • js实现登录功能
  • python开发技术详解
  • unity图集作用
  • 怎么用bootstrap搭建网站
  • jquery自带的弹出框
  • javascript基础笔记
  • 河南车船税收费标准2022年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设