空间风暴

JavaEE的学习从此开始。。。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery获取复选框checkbox的值

Posted on 2012-07-26 17:35  空间风暴  阅读(44325)  评论(0)  编辑  收藏  举报

jQuery API :

each(callback) :以每一个匹配的元素作为上下文来执行一个函数。

 

:checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

 

js:

//js获取复选框值    
            var obj = document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组    
            var s='';//如果这样定义var s;变量s中会默认被赋个null值
            for(var i=0;i<obj.length;i++){
                 if(obj[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
                 s+=obj[i].value+',';   //如果选中，将value添加到变量s中    
            }

jquery:

 

//jquery获取复选框值    
            var chk_value =[];//定义一个数组    
            $('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数    
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
            });

其中jsp页面代码

 

View Code 
<%@ page language="java" contentType="text/html" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//     basePath = http                   ://  127.0.0.1                 :  8080                    /DWR_checkbox /
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>DWR获取浏览器页面信息</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.7.2.js"></script>
        <script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
        <script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
        <script type='text/javascript' src='<%=path%>/dwr/interface/test.js'></script>
        <script type='text/javascript' src='<%=path%>/dwr/interface/test1.js'></script>
        <script type='text/javascript' src='<%=path%>/dwr/interface/userLogin.js'></script>
    <script type="text/javascript"> 
    
        function ceshi1()
        { 
            test.hasPermission(mydwr("user").value,mydwr("pass").value,  // 使用$()属性获取当前页面输入的用户名和权限的值
                function(data)
                {
                    if(data)
                    {
                        mydwr("hp1").checked = "checked";
                    }else{
                        mydwr("hp1").checked = null;
                    }
                    document.getElementById("boolean1").value = data;
                });
        }
        
        function ceshi2()
        {
            test.hasPermission(dwr.util.getValue("username"),dwr.util.getValue("password"),// 使用DWR中的util.js工具中的属性获取当前页面输入的用户名和权限的值，给后台.java的hasPermission方法的参数赋值，再执行此方法(不是void类型有返回值)得到个返回值。
                function(data)
                {
                    if(data)
                    {
                        document.getElementById("hp").checked = "checked"; // 使用byId()属性获取当前页面checkbox的checked属性
                    }else{
                        document.getElementById("hp").checked = null;
                    }
                    document.getElementById("boolean2").value = data;
                    dwr.util.setValue("boolean3",data);
                    //dwr.util.setValue(boolean3,"哈哈");
                    dwr.util.setValue(div,data);
                    //dwr.util.setValue(body,data);
                });  // 用function(data)方法来处理后台.java方法执行后的返回值，存在data变量中，在执行function(data)方法的语句
        }
        
        function invoke1()
        { 
            dwr.engine.setAsync(false);//<!-- 默认是异步执行的true，设置成false就是同步执行 方法按顺序执行-->
            test1.method1(
                function(data){
                    alert(data);
                }
            );
            test1.method2(
                function(data){
                    alert(data);
                }
            );
        }
        
        function invoke2(){ 
            test.getArray(
                 function(data)
                 {
                     //for(var i=0;i<data.length;i++){
                     //    alert(data[i]);
                     //}
                     dwr.util.addOptions(selectid,data);//根据后台数组值填充ID为selectid的列表
                 });
         } 
         function invoke3(){
            dwr.util.removeAllRows(tid);//根据tbody的id删除该tbody
         }
         
         function invoke4(){
             var a=dwr.util.getText(selectid);
            dwr.util.setValue(tdid,a);
         }
        function show()
        {
            var name = document.getElementById("user").value;
            var pass = document.getElementById("pass").value;
            var obj = new objBean(name,pass); 
            userLogin.alterUser(obj,
                function(data){
                    if(name == data.username && pass == data.password){
                        alert("success");
                    }else{
                        alert("error");
                    }
                    document.getElementById("user").value = data.username;
                    document.getElementById("pass").value = data.password;
            });
        }
        function objBean(name,pass)
        {
            this.username = name;
            this.password = pass;
        }
        function go_to()
        {    
            $('#first_jsp').show();
            test.getInclude(function(data){
                $('#first_jsp').html(data);
            });
        }
        function go_to_iframe()
        {
            $("#myframe1").show();
            test.getIncludeBean(function(data){
                $('#myframe1').attr('src',"<%=basePath%>"+data);
            });
        }
        function getInfo(){
            //js获取复选框值    
            var obj = document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组    
            var s='';//如果这样定义var s;变量s中会默认被赋个null值
            for(var i=0;i<obj.length;i++){
                 if(obj[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
                 s+=obj[i].value+',';   //如果选中，将value添加到变量s中    
            }
            alert(s == '' ? '你还没有选择任何内容！' :s);
            
            dwr.util.setValue(tdid,s);
            //jquery获取复选框值    
            var chk_value =[];//定义一个数组    
            $('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数    
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
            });    
            alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);    
            dwr.util.setValue(checkboxInfo,chk_value);
        }
    </script>
  </head>
  <body id="body">
  <form>
      <table id="tableid" border="1" align="center">
          <tr><td>用户名：</td><td><input id="user" type="text" name="username"/></td></tr>
          <tr><td>密码：</td><td><input id="pass" type="text" name="password"/></td></tr>
          <tr>
              <td><input id="getInfo" type="button" value="获取信息" onclick="show()"/></td>
              <td><input type="reset" value="重置" /></td>
          </tr>
          <tbody id="tid">
              <tr>
                  <td colspan="2" >
                      <input id="hp1" type="checkbox" name="hpname" >测试权限<br>
                    <input type="button"name="button"value="测试1" onclick="ceshi1()"> 
                    返回值：<input id="boolean1" type="text" />
                </td>
              </tr>
              <tr>
                  <td >
                      <input id="hp" type="checkbox" name="hpname" >测试权限<br>
                      <input type="button"name="button"value="测试2" onclick="ceshi2()">
                </td>
                <td>
                    返回值：<input id="boolean2" type="text" />
                    dwr.util.setValue:<input id="boolean3" type="text" />
                    <div id="div" > 这是一个div标签</div>
                </td>
              </tr>
          </tbody>
          <tr>
              <td id="tdid"colspan="2" >修改此行值</td>
          </tr>
    </table>
    </form>
                <input type="button"name="button"value="异步调用测试" onclick="invoke1()">
                <input type="button"name="button"value="加载Array值" onclick="invoke2()">
                <input type="button"name="button"value="删除所有行" onclick="invoke3()">
                <input type="button"name="button"value="修改行值" onclick="invoke4()">
        <div>
            <select id="selectid"></select>
        </div>
        <input type="button"name="button"value="框架(iframe)中加载bean.jsp" onclick="go_to_iframe()">
        <input type="button"name="button"value="DIV中加载first.jsp" onclick="go_to()">
        <iframe id="myframe1" style="width:500;height:200;border:10px;padding:0px;display:none"  src=""  ></iframe>
        <div id="first_jsp" style="width: 100%; height: auto; display:none"></div>
<form>
        <input type="checkbox" name="interest" value="VC" />VC
        <input type="checkbox" name="interest" value="VB" />VB
        <input type="checkbox" name="interest" value="VFoxpro" />VFoxpro
        <input type="checkbox" name="interest" value="VJava" />VJava
        <input type="checkbox" name="interest" value="BC" />BC
        <input type="checkbox" name="interest" value="Cobol" />COobol
        <input type="checkbox" name="interest" value="Java" />Java
        <input type="checkbox" name="interest" value="Delphi" />Delphi
        <input type="button" value="获取复选框值" onclick="getInfo()">
</form>
        <div id="checkboxInfo" style="width: 100%; height: auto; display:block"></div>
  </body>
</html>