JS 原生实现复选框全选反选功能

按钮功能实现思路：
全选按钮：直接将全选按钮的状态赋值给每一个复选框。
复选框：只有当所有的复选框选中时，全选按钮才能选中，所以每当复选框每点击一次就要检测所有的复选框有没有选中，本方法是设置一个开关flag ，来筛选出复选框都选中的情况。
反选按钮功能：直接将此时按钮的状态取反即可。

<body><input type="checkbox" id="checkbox">全选 <input type="button" id="btn" value="反选"><br /><input type="checkbox" class="inp"> 张三<br /><input type="checkbox" class="inp"> 李四 <br /><input type="checkbox" class="inp"> 王五<script>let checkbox = document.getElementById('checkbox'); //全选按钮let btn = document.getElementById('btn'); //反选按钮let inp = document.querySelectorAll('.inp'); // 小按钮// 设置全选checkbox.onclick = function () {for (var i = 0; i < inp.length; i++) {inp[i].checked = this.checked; // 这个里的 是将全选按钮的状态赋值给所有的inp  }};// 设置小按钮// 要个每一个按钮都要绑定点击事件 所以需要循环 ， for (let i = 0; i < inp.length; i++) {inp[i].onclick = function () {let flag = true;// 每点击一个小按钮 就要检测 所有的小按钮是否都全选了 设置了一个 开关for (let i = 0; i < inp.length; i++) {if (!inp[i].checked) {flag = false;}}checkbox.checked = flag;}};// 反选btn.onclick = function (){for(let i = 0 ; i < inp.length ; i++){if(inp[i].checked){inp[i].checked = false;checkbox.checked = false;}else{inp[i].checked = true;    checkbox.checked = true;}}};</script>
</body>

实现复选框还有另外一种更加简便的方法：

功能实现思路：当复选框的选中个数等于复选框的个数时，代表复选框已经全部选中，就要将全选按钮选中。

  for (var i = 0; i < inp.length; i++) {inp[i].onclick = function () {let Select = document.querySelectorAll('.inp:checked').length; // 获得此时选中的复选框的数量//复杂点写法： // if (Select == inp.length) {  // 判断：复选框选中的个数 是否等于 复选框的个数 ， 返回值 true / false//    checkbox.checked = true;// } else {//    checkbox.checked = false;// };//简便写法：checkbox.checked = Select == inp.length;  // 直接将 判断复选框选中的个数 是否等于 复选框的个数的结果赋值给全选按钮}};

JS 原生实现复选框全选反选功能相关推荐

html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
复选框全选以及获取所有选中的值
复选框全选以及获取所有选中的值总结一下 jsp中获取数据 <%Map<String,List> map = (Map<String,List>)Function ...
html 怎么整体全选功能,html复选框全选按钮
如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
自制jQuery 复选框全选与反选插件
(function ($) { //复选框全选 $.fn.checkAll = function (options) { var defaults = { chName:"checkName ...
react实现全选和反选_react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下运行效果图如下: 代码: import React, { Component } from 'react'; ...

JS 原生实现复选框全选反选功能

JS 原生实现复选框全选反选功能

JS 原生实现复选框全选反选功能相关推荐

最新文章

热门文章