jQuery+SpringMVC中的复选框选择与传值实例
更新时间：2018年01月08日 15:16:09 作者：Bossen
下面小编就为大家分享一篇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 Fade用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)的相关资料,需要的朋友可以参考下2016-01-01
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果2012-01-01
当我们遇到提交表单时，需要我们重复添加好几个表单，在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮，也就是新增一项，通过点击复制按钮来实现新增一项，怎么实现的呢？下面小编跟大家分享，需要的朋友的朋友可以参考下2015-09-09
以前在写ajax请求时，总是喜欢使用jQuery+ashx的方式进行调用，今天采取jQuery+WebService的方法来做ajax请求，发现这种方式比使用ashx的方式要更方便。2011-03-03
这篇文章主要介绍了jQuery实现带有动画效果的回到顶部和底部代码,涉及jQuery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
JQuery构建客户/服务分离的链接模型中Table分页代码效率初探！2010-01-01
动态加载Javascript是一项非常强大且有用的技术。这方面的主题在网上已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加载js2014-04-04
本篇文章是对可扩展的无限极联动下拉选项的实例进行了分析介绍，需要的朋友参考下2013-05-05
这篇文章主要介绍了jQuery+php实时获取及响应文本框输入内容的方法,涉及jQuery响应键盘事件及ajax调用php文件针对输入内容的处理与回调相关技巧,非常简单易懂,需要的朋友可以参考下2016-05-05
最新评论