cooln86
2012-03-16 23:37 浏览 288
已采纳

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条回答 默认 最新

  • 已采纳
    oxcow oxcow 2012-03-18 10:41

    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即可。这个你可以自己尝试下。

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

    点赞 评论 复制链接分享
  • suziwen suziwen 2012-03-16 23:51

    取得选中的复选框

    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]

    点赞 评论 复制链接分享
  • ll89308839 ll89308839 2012-03-17 00:03
    点赞 评论 复制链接分享
  • suziwen suziwen 2012-03-17 00:33

    [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]

    点赞 评论 复制链接分享
  • cao447214075 cao447214075 2012-03-17 10:13

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





    " [/color]/>

    ${p.userID}

    ${p.userName}

    ${p.userSex}

    ${p.userPhone}

    ${p.email}

                    </tr>  
               </c:forEach>  
    

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

    点赞 评论 复制链接分享
  • oxcow oxcow 2012-03-17 14:28

    [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:如果还是弄不出来,那就等周一去了给你找完整的代码了,在家实在是懒的写代码。

    点赞 评论 复制链接分享
  • oxcow oxcow 2012-03-17 16:05

    [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]

    点赞 评论 复制链接分享
  • oxcow oxcow 2012-03-18 10:43

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

    点赞 评论 复制链接分享
  • chun44e chun44e 2012-03-19 13:40

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

    点赞 评论 复制链接分享

相关推荐