网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jquery获取复选框checkbox的值的简单实现方法
内容
    下面小编就为大家带来一篇jquery获取复选框checkbox的值的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
    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页面代码
    代码如下:
    <%@ 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">
         <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" src="" ></iframe>
        <div id="first_jsp"></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"></div>
     </body>
    </html>
    以上这篇jquery获取复选框checkbox的值的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 5:17:30