react实现全选和反选_全选的实现

在很多的表单中我们都会

看到有一个这样的功能,全选后进行一系列的操作。如

2f6b1c6f6bc0e03967e3e2bc500c43c6.png
操作前

ed34f291c0944e05c6c10d119ab151c6.png
操作后

简单的js实现

首先要定义多选框,在表头可以使用id来定义同时添加onclick点击事件

<input type="checkbox" id="all" onclick="checkAllCart(this.checked)"/>

其余的用name来定义。为什么不用id来定义,大家应该都知道吧。

<input type="checkbox" name="one" value="${ct.key}" onclick="checkOneCart()"/>

js来实现

一步一步来先完成全选,全选很简单,

function checkAllCart(v) {var chOne = document.getElementsByName("one");for (var i = 0; i < chOne.length; i++) {chOne[i].checked = v;}}

来解释一下,获取name为one 的选框,通过遍历来进行选择,这里的v就等于true或false。

还有一步是,当全选完成后进行反选,这时候就不是全部了,那又如何处理。

function checkOneCart() {var chOne = document.getElementsByName("one");var flag = true;for (var i = 0; i < chOne.length; i++) {if (!chOne[i].checked) {document.getElementById("all").checked = false;//将all的按钮显示去掉flag = false;break;}if (flag) {document.getElementById("all").checked = true;}}}

同样获取name为one的选框。同时定义一个flag来选true与false。

在遍历全部的one的时候如果有一个不是true,这时候的全选会没有勾,同时定义flag为false

如果flag为true的时候全选会再次出现对勾。

这样一个简单的全选就完成了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/568039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对tf.nn.softmax的理解

Softmax的含义&#xff1a;Softmax简单的说就是把一个N*1的向量归一化为&#xff08;0&#xff0c;1&#xff09;之间的值&#xff0c;由于其中采用指数运算&#xff0c;使得向量中数值较大的量特征更加明显。 如图所示&#xff0c;在等号左边部分就是全连接层做的事。 W是全连…

面试后要请你吃饭_面试问同事请吃饭唯独不叫你咋办?小伙说这是好机会,当场被录取...

分享职场故事&#xff0c;交流职场经验&#xff0c;欢迎关注“罗波”。不知道大家在面试的过程中&#xff0c;有没有遇到过一些考官出了非常奇葩或者让你难以回答的题目。曾经在一次人事招聘的面试环节中&#xff0c;我的朋友小何就遇到了这样的一个问题&#xff0c;当时领导问…

心动的本质是什么_那一刻,我怦然心动了......

见到布莱斯罗斯基的第一天&#xff0c;我心动了。他的双眸有种魔力让我如痴如醉。女孩对一个刚见面的男孩一见钟情&#xff0c;男孩成了她的邻居&#xff0c;而她管这种感觉叫&#xff1a;怦然心动。2010年《怦然心动》上映&#xff0c;导演罗伯莱纳用一棵树&#xff0c;一对小…

筒灯智能驱动芯片作用_如然之光,魅族 Lipro 智能家居发布首期健康照明系列--智能设备 -...

1 月 5 日&#xff0c;魅族科技(MEIZU)正式发布了 Lipro 智能家居旗下的首期产品&#xff0c;Lipro 健康照明系列。作为 Lipro 品牌的首次产品亮相&#xff0c;Lipro 健康照明系列集顶尖光源品质与优雅工业设计于一体&#xff0c;为用户带来全场景、高品质的光照体验。Lipro 健…

vue 如何生成一个dom元素_通过一个简单的示例学习如何编写Vue组件

大家好&#xff0c;本篇文章我将带着大家一起学习如何编写自定义组件(Components)&#xff0c;通过「vue基础」新手快速入门篇(一)这篇文章的学习&#xff0c;我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项目。基于这个设计原则&#xff0c;我们可以更专注于设…

tensorFlow13卷积神经网络发展

数据增强&#xff1a;增加训练数据&#xff0c;水平翻转&#xff0c;改变对比度 dim代表插入的位置。0代表第一个位置&#xff0c;1表示第二个位置&#xff0c;-1表示最后一个位置

物体运动到一个点停止_大颗粒搭建中常见的结构运动

今天&#xff0c;给大家带来大颗粒搭建中常见的结构家长们可以带孩子一起将原理编程实践举一反三&#xff0c;创造创新&#xff01;1齿轮传动齿轮传动是指用主、从动轮的齿轮进行动力传递&#xff0c;从而达到使物体运动的作用。① 减速传动当小轮是主动力大轮是从动轮时物体作…

第k个数组中的最小值

练习1&#xff1a; 二维vector操作&#xff1a; #include<iostream> #include <vector> using namespace std; int main() {vector<vector<int>> a;vector<int> b;b.push_back(1);b.push_back(2);vector<int> c;c.push_back(11);c.push_b…

Leedcode1-求树的最小高度

#include<iostream> #include<algorithm> #include<queue> using namespace std; //5种情况&#xff1a;空树&#xff1b;没有子树&#xff1b;只有左/右子树&#xff1b;有俩子树&#xff1b; struct BinaryNode {BinaryNode *left;BinaryNode *right;int d…

C++/C中 sizeof(指针)和sizeof(数组名)的区别

1、sizeof(array)/sizeof(int)的含义 array是个数组 sizeof (array)就是这个数组所占的内存总量&#xff08;字节数), sizeof(int)就是单个所占的内存. 所以呢&#xff0c; sizeof (array&#xff09; / sizeof (int)就是array数组的元素的个数. 2、 sizeof(指针)和sizeof(数…

数据结构-栈3-栈的应用-就近匹配

#define _CRT_SECURE_NO_WARNINGS #include"LinkList.c" #include<stdio.h> #include<stdlib.h> #include<string.h> //括号有没有匹配。哪个不匹配就指向哪个。。 //扫描字符串 //1、非括号字符忽略 //2、若遇到左括号&#xff0c;则入栈 //3、若…

使用 Jekyll 构建你的网站 - 初入门

文章目录 一、Jekyll介绍二、Jekyll安装和启动2.1 配置Ruby环境1&#xff09;Windows2&#xff09;macOS 2.2 安装 Jekyll2.3 构建Jekyll项目2.4 启动 Jekyll 服务 三、Jekyll常用命令四、目录结构4.1 主要目录4.2 其他的约定目录 五、使用GitLink构建Jekyll博客5.1 生成Jekyll…

调用ice服务器_Nodejs+socket.io搭建WebRTC信令服务器

前言我们在学习 WebRTC 时&#xff0c;首先要把实验环境搭建好&#xff0c;这样我们就可以在上面做各种实验了。对于 WebRTC 来说&#xff0c;它有一整套规范&#xff0c;如使它使用的接口、使用SDP进行媒体协商、通过ICE收集地址并进行连通性检测等等。除此之外&#xff0c;We…

数据结构-栈4-栈的应用-中缀转后缀

//碰到数字直接输出 //运算符号&#xff1a;与栈顶符号进行优先级比较//若栈顶符号优先级比运算符号优先级低&#xff1a;此符号进栈&#xff08;括号优先级最低&#xff09;//若栈顶符号优先级不低于运算符号优先级&#xff1a;将栈顶符号一直弹出并输出&#xff0c;直到不满足…

四二拍用音符怎么表示_每个音符都是赞美歌拍子分析 0基础识简谱每日必看

点击上方蓝字 关注我们拍子状态分析是为了帮助0基础家人识谱用的&#xff0c;一首诗歌拿在手上只所以看起来复杂&#xff0c;是这些节奏让人眼花缭乱&#xff0c;其实真正理解了其中的含义&#xff0c;就会感觉豁然开朗&#xff0c;此种方法是掌握节奏型的捷径&#xff0c;不需…

数据结构-栈5-栈的应用-后缀转中缀

#define _CRT_SECURE_NO_WARNINGS #include"LinkList.c" #include<stdio.h> #include<stdlib.h> #include<string.h>//遇到数字压栈 //遇到符号&#xff0c;取出栈的第一个元素为右操作符&#xff0c;第二个元素为左操作符。计算完毕后压栈typedef…

midl会议_2020年医学图像处理领域值得关注的期刊和会议

期刊注册IEEE Xplore账号&#xff0c;将该期刊的更新添加提醒&#xff0c;每有新文章出来就会推送到邮箱。注册账号后也可以订阅文章更新会议MICCAI: International Conference on Medical Image Computing and Computer Assisted Intervention (每年9-10月)2.IPMI: Informatio…

数据结构排序1-冒泡,选择,插入排序

冒泡排序 &#xff0c;选择排序&#xff0c;插入排序 #include<iostream> #include<stdio.h> #include<stdlib.h> #include<random> #include<time.h> #include<sys/timeb.h> using namespace std; #define MAX 10long getSystemTime() {…

emacs shell插件_Windows 下 Emacs 中的 zsh shell 使用方法

导读运行跨平台 shell(例如 Bash 或 zsh)的最大优势在于你能在多平台上使用同样的语法和脚本。在 Windows 上设置(替换)shell 挺麻烦的&#xff0c;但所获得的回报远远超出这小小的付出。MSYS2 子系统允许你在 Windows 上运行 Bash 或 zsh 之类的 shell。使用 MSYS2 很重要的一…