jQuery+SpringMVC中的复选框选择与传值
一、checkbox选择
在jQuery中，选中checkbox通用的两种方式：
$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);
对应的jQuery函数，主要完成三个功能：
1、第一个复选框选中或取消选中，则下面的复选框为全选或取消全选；
2、当下面的复选框全部选中时，则将第一个复选框设置为选中，当下面的复选框中有一个没有被选中时，则第一个复选框取消选中；
3、将下面的复选框的id值传递给Controller层，组成id数组，然后调用相应的方法（一般都是删除）。
<script type="text/javascript"> function chgAll(t){//第一个复选框选中或取消选中，则下面的复选框为全选或取消全选；
$("input[name='id']").attr('checked',t.checked);//改变name名为id的input标签内的复选框的checked属性
}
function chg(){//当下面的复选框全部选中时，则将第一个复选框设置为选中，当下面的复选框中有一个没有被选中时，则第一个复选框取消选中；
var ids = $.makeArray($("input[name='id']"));
for(var i in ids){
if(ids[i].checked==false){//如果所有的复选框只要有一个未选中，则第一个复选框不会选中
$("input[name='ids']").attr('checked', false);
return;
}
}
$("input[name='ids']").attr('checked', true);//全部选中的情况下，则第一个复选框选中
}
function deleteBatch(){//将下面的复选框的id值传递给Controller层，组成id数组，拼接url到controller层，调用批量删除方法（deleteBatch())方法
var ids = $.makeArray($("input[name='id']:checked"));//通过$.makeArray将id放在数组中
var url = '<%basePath%>/web/goodsList/deleteBatch';//此url指向controller层的deleteBatch方法，需要id属性
var flag = true;
for(var i in ids){//遍历数组
if(i == 0){
url += "?id=" + ids[i].value;//第一个id属性前加？拼接
flag = false;
} else {
url += "&id=" + ids[i].value;//后面的id属性前加&拼接
flag = false;
}
}
if(flag){//如果没有选中商品
alert("请选中商品！");
return;
}
if(confirm("确定删除记录吗？")){
window.location.href = url;//把拼接好的id数组传给页面
}
}
</script>
二、在jsp页面中对应的列表：
1、列表中要给表头中的复选框（第一个复选框）设置name名，并调用chgAll(this)方法来实现全选或全不选；
2、table中的复选框设置name名，并调用chg()方法来实现上面的第二个功能；
3、form表单提交时调用deleteBatch()方法
<body>
<form:form id="uuForm" modelAttribute="goods" action="<%basePath%>/web/goodsList/" method="post" >//form表单提交时调用deleteBatch()方法
<div> <input type="button" onclick="deleteBatch()" value="批量删除" /> </div>
</form:form>
<sys:message content="${message}" />
<table id="cTable" >
<thead>
<tr>
<th><input type="checkbox" name="ids" onchange="chgAll(this)" /></th>//调用chgAll(this)方法来实现全选或全不选,此处的this指所有复选框对象
<th>商品编号</th>
<th>商品标题</th>
</tr>
</thead>
<tbody>
<c:forEach items="${goods}" var="goods" varStatus="status">
<tr>
<td><input type="checkbox" name="id" value="${goods.goodsId }" onchange="chg()"/></td>//调用chg()方法
<td>${webGoodsInfo.goodsNo}</td>
<td>${webGoodsInfo.goodsTitle}</td>
</tr>
</c:forEach>
</tbody>
</table> </body>
三、看下spring MCV中的controller代码
@RequestMapping("deleteBatch")//对应jsp页面中的deleteBatch()请求
public String deleteBatch(Long[] id, RedirectAttributes redirectAttributes){//此处的id为页面中的id值，必须保持一直！！！！
if(id !=null&&id.length!=0){
goodsService.deleteBatch(id);
}
return "redirect:"+Global.getAdminPath()+"/web/webGoodsInfo/?repage";//重定向到列表页面
}
}
看下效果：
（代码部分我省略了不少，但是今天讲的复选框多选与传值的部分全部无损呈现！）
jQuery+SpringMVC中的复选框选择与传值的更多相关文章
- jquery：获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
- 在word中做复选框打对勾钩
在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...
- python QQTableView中嵌入复选框CheckBox四种方法
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- nodetree中 前面复选框禁用插件
nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...
- QTableView中嵌入复选框CheckBox 的四种方法总结
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- Jquery获取当前页面中的复选框选中的内容
在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "< ...
- jquery 实现复选框选择效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
随机推荐
- thinkphp3.2验证码在服务器上显示不出来
ThinPHP3.2 验证码 在本地服务器访问可以显示,上传到服务器就不能访问了 /**** * 验证码 */ function code() { $config=array( 'fontSize'= ...
- HIVE之常用字符串函数
可以参考: 博文 : https://www.iteblog.com/archives/1639.html
- css之水平垂直居中方式
布局中常用到的水平垂直居中问题 作为一个前端开发人员,布局是我们日常工作中解除最多的,而水平垂直居中也必不可少的出现,面试中也经常遇到噢- 一.position:absolute(固定宽高) widt ...
- POJ 1321 棋盘问题 dfs 难度:0
http://poj.org/problem?id=1321 注意是在'#'的地方放棋子 矩阵大小不过8*8,即使是8!的时间复杂度也足以承受,可以直接dfs求解 dfs时标注当前点的行和列已被访问, ...
- Alpha阶段第1周Scrum立会报告+燃尽图 01
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...
- HTML页面每次打开的时候都清除页面缓存
解决办法为: (1) 用HTML标签设置HTTP头信息 <HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no- ...
- HDU 2485
http://acm.hdu.edu.cn/showproblem.php?pid=2485 n个车站,m条边,两边之间费用为1,问最少摧毁多少车站,使得1-n无法在k时间内到达 将2-(n-1)每个 ...
- iOS-----使用GCD实现多线程
使用GCD实现多线程 GCD的两个核心概念如下: 队列 队列负责管理开发者提交的任务,GCD队列始终以FIFO(先进先出)的方式来处理任务---但 由于任务的执行时间并不相同,因此先处理的任务并一定先 ...
- 回测框架pybacktest简介（一）
pybacktest 教程 本教程让你快速了解 pybacktest's 的功能.为此,我们回测精典交易策略移动平均线MA交叉. MA快线上穿慢线时,买进做多 MA快线下穿慢线时,卖出做空 进场规则, ...
- 2018-2019第一学期C语言助教总结
博客作业成绩统计表 学号 第一次成绩 第二次成绩 第三次成绩 第四次成绩 第五次成绩 4022 75 84 75 64 75 4023 90 80 74 83 78 4024 75 63 61 60 ...