| 原生js实现复选框（全选/全不选/反选）效果【含完整代码】 | 您所在的位置：网站首页 › wps表格全选之后取消其中几个 › 原生js实现复选框（全选/全不选/反选）效果【含完整代码】 |
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
|
实现效果
定义一个数组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 复选框（checkbox）全选/全不选/反选 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; } 全选 反选 one two three four five six seven eight nine ten 您所选择的内容包括： 1、切换全选/全不选文字； 2、根据选中个数更新全选框状态； // 全选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 |
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |