jQuery和Java的复选框问题

请教一个问题:如何用jQuery获取左边那列“删除/批量”下选中的复选框,并在按“删除/批量”那个<a></a>标签后,把相关值提交到另一个页面去?求教!
此页面相关代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'process.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  
  <body>
    <table width="745" border="1" cellspacing="0">
               <!--表头标题行-->
                <tr>
                    <td>会员信息管理</td>
                </tr>
                <tr>
                    <th width="84" scope="col"><a href="manager.jsp">删除/批量</a></th>
                    <th width="146" scope="col">会员编号</th>
                    <th width="92" scope="col">会员姓名</th>
                    <th width="52" scope="col">会员性别</th>
                    <th width="58" scope="col">联系电话</th>
                    <th width="220" scope="col">Email地址</th>
                </tr>
                <c:forEach var="p" items="${requestScope.lst}">
                    <tr>
                        <td><input type="checkbox" name="chose" /></td>
                        <td>${p.userID}</td>
                        <td>${p.userName}</td>
                        <td>${p.userSex}</td>
                        <td>${p.userPhone}</td>
                        <td>${p.email}</td>
                        
                    </tr>
                </c:forEach>
                
        </table>
  </body>
</html>
 

9个回答

a.jsp[code="html"]<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



Insert title here $(function() { $("#allche").bind("click", function() { var ches = $(this).attr("checked"); if (!ches) { ches = false; } $.each($("#tCks :checkbox"), function(idx, val) { $(val).attr("checked", ches); }); }); $("#send").bind("click", function() { var aId = []; $.each($("#tCks :checked"), function(idx, val) { aId.push($(this).val()); }); if (aId.length == 0) { alert("请选择删除项"); return false; } var ids = aId.join(","); //使用1,或者使用2和3都可以 $(this).attr("href", "b.jsp?ids=" + ids); // 1 //window.location.href = "b.jsp?ids=" + ids; //2 //return false; // }); });



批量删除










<%
for (int i = 1; i < 4; i++) {
%>

id name age
http://www.w3.org/TR/html4/loose.dtd">



Insert title here


<%
String ids = request.getParameter("ids");
String[] aId = ids.split(",");
//拿到删除用户的id数组了,将aId传递到你的数据操作部分,进行删除即可。
%>
你要删除的用户ID为<%=ids%>

[/code]

这里不管你是不是使用servlet还是jsp都是一样的。如果你使用的是servlet,那么把[code="js"]$(this).attr("href", "b.jsp?ids=" + ids);[/code]中的b.jsp换成你的servlet名称就行了,然后在该servlet中使用[code="java"]request.getParameter("ids");[/code]也就是b.jsp页面的代码进行获取就行了。最后将得到的id数组传到数据处理层进行处理就行了。

当然这里建议不要使用href的形式,你可以提供个form表单,把选中的值放在一个隐藏域中机型表单提交,那样做也是可以的,要改动的就是在js中拿到选择的checked值,也就是[code="js"]var aId = [];
$.each($("#tCks :checked"), function(idx, val) {
aId.push($(this).val());
});[/code]后,把aId.join(',')的值付给你的隐藏变量既可以,让后让form表单submit即可。这个你可以自己尝试下。

我想我已经写的很明白了,如果还是弄不来那就再的无语了。呵呵,祝好运气了!

取得选中的复选框

var checked = $("input[name='chose']:checked");

返回的是一个数组,值为被选中的checkbox的dom信息

[quote]并在按“删除/批量”那个标签后,把相关值提交到另一个页面去[/quote]

可以在上添加事件

[code="js"]function tijiao(){
var checked = $("input[name='chose']:checked");

//在这里把选中的checkbox拼装成query参数加到提交的url里,用location.href=url+checked。
就可以了

//或者自己创建一个form,post方式提交,

//再或者ajax提交

}[/code]

[code="html"]<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<!--表头标题行-->

会员信息管理sss


删除/批量
会员编号
会员姓名
会员性别
联系电话
Email地址




${p.userID}
${p.userName}
${p.userSex}
${p.userPhone}
${p.email}
                </tr>
            </c:forEach>
            <tr>
                    <td><input type="checkbox" name="chose"  value="1"/></td>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                    <td>d</td>
                    <td>f</td>

                </tr>
                <tr>
                    <td><input type="checkbox" name="chose"  value="2"/></td>
                    <td>a2</td>
                    <td>b2</td>
                    <td>c2</td>
                    <td>d2</td>
                    <td>f2</td>

                </tr>
                <tr>
                    <td><input type="checkbox" name="chose"  value="3"/></td>
                    <td>a3</td>
                    <td>b3</td>
                    <td>c3</td>
                    <td>d3</td>
                    <td>f3</td>

                </tr>
    </table>


[/code]

把你的table放到form表单中,列表显示循环做如下修改:





" [/color]/>

${p.userID}

${p.userName}

${p.userSex}

${p.userPhone}

${p.email}

                </tr>  
           </c:forEach>  

给你的a标记添加一个onclick事件,负责提交表单,
在后台action中通过request.getParameterValues()获得一个string类型的数组,这个数组中的值就是你选择行的id,可以根据这个id进行你所需要的操作。

[quote]可是我这个不是预先定义好的checkbox哦,是看数据库里的表有多少条记录,就在那条记录前加一个checkbox哦。 [/quote]

给你个方法把,代码家里没有!

首先你的table的如下写法:
[code="html"]



删除/批量

会员编号

会员姓名

会员性别

联系电话

Email地址










${p.userID}

${p.userName}

${p.userSex}

${p.userPhone}

${p.email}
                </tr>  
            </c:forEach> </tbody> [/code]

1、这里加

的原因是为了方便使用jquery选择器选中中的checkbox
2、checkbox元素加上value属性,value属性的值就是每条记录的主键,比如用户id
3、删除/批量的连接改成调用一个javascript:return test()
那么做法就是在点击链接时出发test函数,该函数用于获取指定tbody元素中被选中的checkbox元素,那么会得到一个数组,我们for这个数组将input元素的value值拿出来放在一个数组里,然后使用join(",")隔开后在设定href元素既可以了。在跳转页面我们在split这个字符串拿到要删除的所有数据id进行批量删除就可以。

test大概这样写吧
[code="js"]
function test(){
var ches = $("#ches : checked");
if(ches.length == 0){
alert("请选择");
return false;
}
var uIds = [];
$.each($(ches),function(idx,val){
uIds.push($(val).val());
});

var us  = uIds.join(",");
window.local.href = "manager.jsp?uids="+us;

}
[/code]
这样发出的连接请求肯定是 manger.jsp?uids=1,2,3,4,5这个样子。

上面的代码大概就这个样子,具体的你可以看下jqury 的api.不过思想及这样,至于代码怎么写,有了思想还怕写不出代码么! 呵呵
ps:如果还是弄不出来,那就等周一去了给你找完整的代码了,在家实在是懒的写代码。

[quote]大侠,我按照你的方法改了,为什么会出现:
HTTP Status 404 - /clubSys/return%20test();
呢 [/quote]

呵呵,我只是随便写的,没经过测试。吧那个return去掉就行了
[code="html"]
function test(){
//reuturn false; //如果返回false则不超链接
window.location.href = "http://www.sina.com.cn";
}
test
[/code]

注意用超链接提交时get方法。对应你servlert中的doGet方法

你可以在检索的时候多检索出一个自增字段。然后把那个字段的值放到CHECKBOX中。然后就可以根据那个值得到相应选择的行的记录!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐