jQuery+SpringMVC中的复选框选择与传值

时间：2022-09-07 13:01:05

一、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+SpringMVC中的复选框选择与传值的更多相关文章

  1. jquery：获取checked复选框的问题

    jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...

  2. 在word中做复选框打对勾钩

    在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...

  3. python QQTableView中嵌入复选框CheckBox四种方法

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  4. nodetree中 前面复选框禁用插件

    nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...

  5. QTableView中嵌入复选框CheckBox 的四种方法总结

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

  6. Jquery获取当前页面中的复选框选中的内容

    在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "&lt ...

  7. jquery 实现复选框选择效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  8. JQuery&colon;JQuery基本语法&comma;JQuery选择器&comma;JQuery DOM&comma;综合案例 复选框&comma;综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  9. 如何在select下拉列表中添加复选框&quest;

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

随机推荐

  1. apache虚拟主机访问原理

    www.a.com www.b.org www.c.net 都放在10.0.0.10这个服务器上 那么客户访问这三个域名 服务器是怎么分辨访问的是哪个目录呢 GET http://download.m ...

  2. shell实现trim函数－去除字符串两侧的空格&lpar;包括tab&comma;space键&rpar;

    shell实现trim函数效果去除字符串两侧的空格,以下三个命令等价,都能实现 sed 's/^\s*//' totrim.txt |sed 's/\s*$//'>trimed.txtsed ' ...

  3. 【转】android 5&period;0 64bit系统加载库文件失败问题浅析

    原文网址:http://blog.csdn.net/andrewblog/article/details/43601303 最近公司的一个项目使用android 5.0 64 bit平台,相对以前版本 ...

  4. &lpar;简单&rpar; ZOJ 3209 Treasure Map &comma; DLX&plus;精确覆盖。

    Description Your boss once had got many copies of a treasure map. Unfortunately, all the copies are ...

  5. 通过浏览器navigator判断浏览器版本或者手机类型&amp&semi;&amp&semi;判断微信访问

    javascript 的navigator属性,不常用,但是用处也不少,主要用处是在做浏览器兼容的问题的时候,现在有的网站已经不兼容IE6,用户假如用IE6浏览网页的话,会提示浏览器升级等信息.或者判 ...

  6. 1&period;使用dom4j解析XML文件

    一.dom4j的简介 dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,它 ...

  7. oracle to&lowbar;char函数使用

    Postgres 格式化函数提供一套有效的工具用于把各种数据类型(日期/时间,int,float,numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成原始的数据类型. 注意:所有格式化 ...

  8. Android Studio使用Gradle引入包

    方法一 jar包直接复制到lib中右击add as library,等自动构建完成后,打开build.gradle会发现dependencies中多了一个compile file('libs/***. ...

  9. C&num;与&period;NET的区别和C&num;程序结构

    C#语言及其特点 (1)语法简洁,不允许直接操作做内存,去掉指针操作 (2)彻底的面向对象设计,C#具有面向对象所应用的一切特性:封装.继承.多态 (3)与Web紧密结合,C#支持绝大多数的Web标准 ...

  10. vs2015创建webService

相关文章