表单复选框按钮全选-取消全选小案例

思路：

第一部分--全选和取消全选做法：

让下面所有的复选框的checked属性（选中状态）跟随全选按钮即可

第二部分--下面复选框需要全部选中，上面全选复选框才能选中：

利用for循环将每个复选框添加点击事件，接着使用一个小技巧（设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false）。再一次使用for循环，当每次点击下面的复选框时，都需要检查一下同类的复选框是否被全部选中。若有一个未被选中，执行if条件语句的内容将flag赋值为false.最后将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: 100px auto;width: 300px;height: 200px;}thead tr {background-color: aqua;}</style>
</head><body><table border="1" cellspacing="0"><thead><tr><th><input type="checkbox" id="box1" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="box2"><tr><td><input type="checkbox" /></td><td>Ipad1</td><td>3333</td></tr><tr><td><input type="checkbox" /></td><td>Ipad1</td><td>3333</td></tr><tr><td><input type="checkbox" /></td><td>Ipad1</td><td>3333</td></tr></tbody></table><script>/* 上面的一个总按钮影响下面的分个按钮 *///获取元素var box1 = document.getElementById("box1");var box2 = document.getElementById("box2").getElementsByTagName("input");//注册事件box1.onclick = function() {for (var i = 0; i < box2.length; i++) {//this.checked可以得到当前复选框的选中状态，如果是true就是选中，否则就是未选中box2[i].checked = this.checked;}};/* 下面的分个按钮影响上面的总按钮 */for (var i = 0; i < box2.length; i++) {box2[i].onclick = function() {//设置flag变量来控制全选按钮是否选中var flag = true;//每次点击下面的复选框都要循环检查4个复选框是否全被选中for (var i = 0; i < box2.length; i++) {if (!box2[i].checked) {flag = false;//若有一个未选中，则将flag赋值为false,否则就不执行if中的代码}}box1.checked = flag;};}</script>
</body></html>

表单复选框按钮全选-取消全选小案例相关推荐

css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码表单复选框就是checkbox 1.checkbox的应用复制代码代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...
JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
html构建复选框标签,什么标签用于在表单中构建复选框_HTML表单复选框INPUT标签...
HTML表单复选框标签在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾.它使用的也是标签. 一.定义标签用于表示文本框.密码框.单选框.复选框.文件上传框.普通按钮. ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
Vue实现切换视图（表单与三列多行）的全选与清除功能：
1.表单(index.vue) template: <el-button type="success" v-if="shitu==2" @click=&q ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...

表单复选框按钮全选-取消全选小案例

表单复选框按钮全选-取消全选小案例相关推荐

最新文章

热门文章