zoukankan      html  css  js  c++  java
  • 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";//重定向到列表页面
    	}
    }
    

    看下效果:

     

    (代码部分我省略了不少,但是今天讲的复选框多选与传值的部分全部无损呈现!)

  • 相关阅读:
    20135202闫佳歆-第二章家庭作业-2.69
    20135202闫佳歆——信息安全系统设计基础第六周学习总结
    20135202闫佳歆——信息安全系统设计基础第五周学习总结
    20135202闫佳歆——信息安全系统设计基础第四周学习总结
    20135202闫佳歆-信息安全系统设计基础第三周学习总结
    20135202闫佳歆——信息安全系统设计基础第二周学习总结
    php txt操作
    phpexcel 导入导出
    windows mysqldump 不成功 1049 1064 报错
    钉钉 移动端免登录 dd.ready不运行或者一直运行
  • 原文地址:https://www.cnblogs.com/bossen/p/5916323.html
Copyright © 2011-2022 走看看