复选框实现全选、全不选、被选；

html代码

     <input type="checkbox" id="checksboxs">全选<input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1">  <input type="checkbox" class="checks1"><input type="checkbox" class="checks1"><input type="checkbox" class="checks1">

js代码

<script type="text/javascript">var checksboxs = document.getElementById('checksboxs');var checks1 = document.getElementsByClassName('checks1');// 全选checksboxs.onchange = function(){for(var i = 0;i<checks1.length;i++){checks1[i].checked = this.checked;}}var index = 0;// 用来计数for(let i = 0;i<checks1.length;i++){每次点击循环一遍所有的元素，存在值为 false（没选中的复选框）就给 checksboxs 赋值falsevar flag = true;for(let j = 0;j<checks1.length;j++){if(!checks1[j].checked){flag = false;break;}}checksboxs.checked = flag;}}</script>

按钮实现全选、全不选、多选；

html代码

     <input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks">  <input type="checkbox" class="checks"><input type="checkbox" class="checks"><input type="checkbox" class="checks"><button id="allCheck">全选</button><button id="notCheck">全不选</button><button id="reveCheck">反选</button>

js代码

<script type="text/javascript">var allCheck = document.getElementById('allCheck');var notCheck = document.getElementById('notCheck');var reveCheck = document.getElementById('reveCheck');var checks = document.getElementsByClassName('checks');// 全选allCheck.onclick = function(){for(var i = 0;i<checks.length;i++){checks[i].checked = true;}}//全不选notCheck.onclick = function(){for(var i = 0;i<checks.length;i++){checks[i].checked = false;}}//反选reveCheck.onclick = function(){for(var i = 0;i<checks.length;i++){checks[i].checked = !(checks[i].checked)}}</script>

复选框实现。全选、全不选、多选相关推荐

jquery设置复选框为只读_checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
vxe-table 使用setCheckboxRow方法选择复选框时出现父级节点没有半选
在使用vxe-table 时发现有个bug table.setCheckboxRow() // 设置行复选框选中发现父级复选框不会出现半选状态,提 issues无果,决定自己二次开发解决问题, ...
layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？
这个功能layui 本身可能没直接提供给我们相关的功能 ,需要自己写出来了有几个疑点可能要一一排查出来核心点: 能不能有一个状态值能判断当前行的数据是否是勾选状态然后就可以一步一步 ...
js 多选框被选中触发的事件_javascript多选框的触发过程详解
这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析,帮助大家理解这部分内容,需要的朋友可以参考下 javascript 中 ...
layui table勾选框的修改_layui怎么设置checkbox勾选
方法1 在返回的json中设置LAY_CHECKED为true,页面上的checkbox就是选中状态了.data":[ {"name":"北京市",& ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
datatables实现复选框全选反选！！（亲测有效）
关于datatables的全选和反选实现 html部分: <table data-toggle="table" class="table table-bordere ...
【react】全选复选框和单个复选框联动功能
需求: 全选复选框显示情况:点击全选复选框时,所有单个复选框状态变为被勾选状态:并且每一单个复选框边框颜色为蓝色:当点击取消全选复选框被勾选的状态时,所有单个复选框状态恢复初始状态(未被勾选状态). ...
axure实现复选框全选_Axure RP实例教程：全选与取消全选效果
原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...

复选框实现。全选、全不选、多选

复选框实现全选、全不选、被选；

html代码

js代码

按钮实现全选、全不选、多选；

html代码

js代码

复选框实现。全选、全不选、多选相关推荐

最新文章

热门文章