浏览网页时我们经常能见到全选选项，比如双十一剁手清空购物车时，就会用到一键全选，但是全选与取消全选的思维是什么呢？

思路：我们会利用多选框的 checked 属性来完成，checked 的返回值是一个 Boolean 类型的值，勾选返回 true ，不勾选返回 false。

全选与取消全选的 JS 代码实现：（文章最后有完整代码参考）

qx是获取的全选选项的元素，xz是获取的要选择的所有元素（this.checked 为全选选项是否选择，选择了返回 true ，没有选择则返回 false，并将此结果利用循环赋值给每一个选项）

 var qx=document.getElementById('qx');var xz=document.querySelector('tbody').querySelectorAll('input');
qx.onclick=function(){for(var i=0;i<xz.length;i++){xz[i].checked=this.checked;}}

单独选项全部选完后全选选项自动勾选的 JS 代码：

先遍历注册事件，然后第二个 for循环的作用为检查是否所有的选项框都选择了，如果没有选择某一个选项，即 ！xz[i].checked ，然后赋值给 flag 为 false，如果全选了则为 true 不变，最后把flag 的值返回给全选框的 checked

 var qx=document.getElementById('qx');var xz=document.querySelector('tbody').querySelectorAll('input');
for(var i=0;i<xz.length;i++){xz[i].onclick=function(){var flag=true;for(var i=0;i<xz.length;i++){if(!xz[i].checked){flag=false;break;}}qx.checked=flag;}}

完整代码：

<!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>Document</title><style>table{margin: 270px auto;width: 500px;height: 350px;border: 1px solid;border-spacing: 0;font-size: 20px;font-weight:500;}td{border: 1px solid;padding-left: 10px;}.qxbox{padding:20px 10px;background-color: rgb(106, 183, 255);}</style>
</head>
<body><table><thead><tr> <td class="qxbox"><label ><input type="checkbox" id="qx"> 全选</label></td></tr></thead><tbody><tr><td> <input type="checkbox" id="1"> <label for="1">选项一</label></td></tr><tr><td> <input type="checkbox" id="2"> <label for="2"> 选项二</label></td></tr><tr><td> <input type="checkbox" id="3"> <label for="3">选项三</label> </td></tr><tr><td> <input type="checkbox" id="4"> <label for="4">选项四</label> </td></tr></tbody></table><script>var qx=document.getElementById('qx');var xz=document.querySelector('tbody').querySelectorAll('input');qx.onclick=function(){for(var i=0;i<xz.length;i++){xz[i].checked=this.checked;}}for(var i=0;i<xz.length;i++){xz[i].onclick=function(){var flag=true;for(var i=0;i<xz.length;i++){if(!xz[i].checked){flag=false;break;}}qx.checked=flag;}}</script>
</body>
</html>

多选框的全选与取消全选相关推荐

html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
html5复选框控制按钮状态,HTML input checkbox复选按钮简介说明
摘要: 下文讲述html代码中input type='checkbox'时的相关属性简介说明,如下所示: input type='checkbox' 简介当input标签中type='checkbo ...
dw 复选框 php输出,Dreamweaver CS3的复选框使用方法
dreamweaver cs4 (dw cs4)中文正式版软件大小:143.3M授权方式:免费软件立即下载 Dreamweaver CS3复选框怎么用?Dreamweaver CS3复选框也是制作 ...
C#窗体程序实现全屏及取消全屏步骤
这篇文章主要介绍了C#窗体程序实现全屏及取消全屏步骤,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧由于项目需要,需要用vs窗体程序实现播放视频的窗口的全屏和取消全屏. 具体实现界面 ...
DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
最初的界面图如图1-1(全选框ID: cb_checkall DEV控件名称:gcCon ): 要实现的功能如下图(1-2 1-3 1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩ ...
Java复选框怎么取消打钩_jsp实现复选框默认选中，不可取消
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
复选框遍历选中 php,jQuery的复选框选择并且获取值
这次给大家带来jQuery的复选框选择并且获取值,jQuery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下. 一.checkbox选择在jQuery中,选中checkbox通 ...
jquery循环复选框选中的值_jquery获取复选框被选中的值
这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下 JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码对checkbox的其他几个操作 1. 全选 2. ...
php实现复选框删除功能,php怎么实现复选框批量删除
php实现复选框批量删除的方法:首先连接数据库并获取一张表:然后创建一个form表单并定义一个复选框:接着添加一个批量删除按钮:最后创建删除的PHP处理页面即可. 本文操作环境:Windows7系统. ...

多选框的全选与取消全选

完整代码：

多选框的全选与取消全选相关推荐

最新文章

热门文章

多选框的 全选 与 取消全选

完整代码：

多选框的 全选 与 取消全选相关推荐

最新文章

热门文章

多选框的全选与取消全选

多选框的全选与取消全选相关推荐