JQuery复选框_全选_不全选_选中数据传值

JQuery技术 复选框 全选/全不选 带选中数据跳转页面
先做好准备工作,我这里的参数id 和值分别是

在这里插入图片描述
jsp 界面效果如图
在这里插入图片描述

这里我给了一个id 方便后面调用,当然用name 也是可以的就是JQuery 写法不同而已,id 调用使用"#"+id属性值,name调用使用 “:”+name属性值,我这里是id 如图红笔划线的地方

在这里插入图片描述
产品的复选框 name

蓝色划线的位置是我要选的复选框所有的产品条数
黑色划线部分就是代表我所有产品的选中状态,this.checked,这个值返回的是ture 和 flase, 这个值恰好是我全选框的选中状态值,这里我直接调用当前dom 对象的选中状态。

注意:这里this 是代表当前dom 对象,也就是说是代表当前的全选框。

这时候你以为做完了么,当然没有,当我所有的产品行选满时,那全选框是不是得选上?如图

在这里插入图片描述

图中红色划线是 上面所说 用name属性值来设置绑定单机事件.

dom对象.prop(),这个方法这里我就不作介绍了,我直接复制粘贴网上的解释。

prop()定义

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

跳转传值

跳转传值可以分为两种,一种直接从前端携带uuid传到后台,另一种直接从后台获取,这里我写的是比较好理解的第一种。

先看我给编辑产品写的点击事件,如图

在这里插入图片描述

红色框起来的是 我事务判断,我要编辑某条产品的信息,肯定是一条对吧,不能同时编辑多条。

浅蓝色框起来的是我要用JQuery方法,取val的值,这里只能将dom对象变成JQuery对象,方法:$(dom对象).val();

还有一点,这里从上面length可以看出,这个dom对象是个数组,那我这里只需要一条数据,直接给数组下标就好了。

接下来就是给我编辑标签 给属性值的时候了,如图是我编辑标签

在这里插入图片描述
方法自己去查,这里将productid的值字符串拼接在了后面。
这时候后台就可以做一个方法来接收uuid 将接收到的uuid 去数据库查所有,再传送到编辑页面就可以了。效果图如下
在这里插入图片描述