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中的复选框选择与传值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
我这里往后端传递checkbox 多选框value的值是通过字符串方式传递,先调用js对选定checkbox遍历获取选的的boxvalue,然后写进隐藏域,最后作文对象的属性提交.见代码:` 前端: <form:form commandName="user" method="post"> <c:forEach items="${deploys}" var="deploy" varStatus="de
-
jQuery实现复选框批量选择与反选的方法
本文实例讲述了jQuery实现复选框批量选择与反选的方法.分享给大家供大家参考.具体实现方法如下: function selectAll(){ $('input[type|=checkbox]').attr('checked','checked'); } function cancelAll(){ $('input[type|=checkbox]').removeAttr('checked'); } 希望本文所述对大家的jQuery程序设计有所帮助.
-
jQuery实现复选框成对选择及对应取消的方法
本文实例讲述了jQuery实现复选框成对选择及对应取消的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
jQuery+SpringMVC中的复选框选择与传值实例
一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个
-
javascript中DOM复选框选择用法实例
本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l
-
asp.net在Repeater嵌套的Repeater中使用复选框详解
.aspx文件中: <%--顶层Repeater--%> <asp:Repeater ID="rptChannel" runat="server"> <itemtemplate> <br /><b><%# Eval("ChannelName")%></b> <%--嵌套的Repeater,指定使用后台创建的Releation来获取数据源--%> <
-
python中tkinter复选框使用操作
代码如下所示: # tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口大小 flag_1 = False flag_2 = False flag_3 = False list_content = ['你的爱好是:'] hobby_list = ['游泳', '唱歌', '旅游'] def click_1(): global flag_1 flag_1
-
js实现当复选框选择匿名登录时隐藏登录框效果
本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复
-
jquery模拟多级复选框效果的简单实例
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c
-
jquery处理checkbox（复选框）是否被选中实例代码
jquery处理checkbox(复选框)是否被选中 现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替 实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&q
-
JQuery实现简单的复选框树形结构图示例【附源码下载】
本文实例讲述了JQuery实现简单的复选框树形结构图.分享给大家供大家参考,具体如下: 这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中:父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中:当所有的子节点都没有选中时,父节点也取消选中 这是实现的最简单的功能.下面来具体的谈谈具体的实现: 1.引入库 所有的这些操作都是通过JQuery来实现的,所以首先要
-
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
页面代码: <!-- 弹出层 --> <section class="popup-bg" ng-if="IsActive"> <div class="popup-box phone-detail"> <div class="popup-title popup-detail-title">通讯录 <i class="iconfont popup-close-font
-
layui从数据库中获取复选框的值并默认选中方法
如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=