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是全连…

Python Pytest装饰器@pytest.mark.parametrize详解

Pytest中装饰器@pytest.mark.parametrize(参数名,list)可以实现测试用例参数化,类似DDT 如:@pytest.mark.parametrize(请求方式,接口地址,传参,预期结果,[(get,www.baidu.com,{"page":1},{"code":0,"msg":"成功"}),(post,www.baidu.…

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

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

exp和e区分

exp(n)代表e的多少次 exp(1)2.71 e-1表示10^-1次 e-10.1

Pytest全局用例共用之conftest.py详解

一、’conftest特点: 1、可以跨.py文件调用,有多个.py文件调用时,可让conftest.py只调用了一次fixture,或调用多次fixture 2、conftest.py与运行的用例要在同一个pakage下,并且有__init__.py文件 3、不需要import导入 conftest.py,pytest用例会自动识别该文件,放到项…

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

见到布莱斯罗斯基的第一天&#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表示最后一个位置

native 真机测试react_React native 安卓真机调试

一、准备工作&#xff1a;1、检测adb是否已经在环境变量中配置&#xff0c;打开&#xff1a;计算机”-“属性”-“高级属性设置”&#xff0c;在高级选项里点击“环境变量”&#xff0c;查看是否设置了adb.exe路径&#xff0c;如果没有就必须添加环境变量操作&#xff1b;或者在…

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

今天&#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…

python不能安装怎么办_python3安装不上怎么办

下载安装程序Python官方的解释器安装包&#xff0c;可以 登录Python 官方网站 下载。点击这里下载注意&#xff1a;如果您要在Windows7上运行Python3.6版本的解释器&#xff0c;一定确保Windows已经安装了 Win7 service pack1 补丁包 &#xff0c;否则安装Python3.6解释器会失败…

VS中监视窗口,即时窗口和输出窗口的使用

以下内容来自&#xff1a;http://shashoutian2005.blog.163.com/blog/static/1685415200971845843605/ 一、监视窗口 &#xff11;、配置应用程序&#xff0c;使应用程序处于调试状态。 &#xff12;、点击“调试”----“窗口”----“监视”----“监视&#xff11;”&#x…

云米冰箱能控制扫地机器人_既能解放劳动力又能提升家庭幸福指数的小家电,云米互联网扫地机Pro开箱!...

既能解放劳动力又能提升家庭幸福指数的小家电&#xff0c;云米互联网扫地机Pro开箱&#xff01;2019-01-15 15:15:004点赞7收藏10评论年底了两人工作都比较忙&#xff0c;周六经常还得去加个班&#xff0c;难得有个周日必须得睡个懒觉呀&#xff0c;基本一睁眼就是9点60了&…

Leedcode1-求树的最小高度

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

jquery对文本赋值和取值_jQuery对表单元素的取值和赋值操作代码

JSjQuery对表单元素的取值和赋值操作代码作者&#xff1a; 来源&#xff1a;www.28hudong.com2013-03-30 00:52:47阅读次$("#keyword")[0].value ""; /*获得TEXT.AREATEXT的值*/ var textval $("#text_id").attr("value"); //或者 v…

navicat 添加外键1215错误

1、主键和外键的字段约束和数据类型必须相同 2、两张表的编码必须相同 3、主键和外键的编码也必须相同 4、设置外键的字段必须先在表中建立字段且不能是主键。 5、外键字段参考字段必须为参考表的主键 6、设置外键前需要把表清空

hbasehlog_HBase原理--RegionServer核心组件之HLog

RegionServer是HBase系统中最核心的组件&#xff0c;主要负责用户数据写入、读取等基础操作。RegionServer组件实际上是一个综合体系&#xff0c;包含多个各司其职的核心模块&#xff1a;HLog、MemStore、HFile以及BlockCache。RegionServer内部结构RegionServer是HBase系统响应…