首页 > 编程 > JavaScript > 正文

jquery获取复选框checkbox的值实现方法

2019-11-20 09:51:33
字体:
来源:转载
供稿:网友

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" 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>

以上这篇jquery获取复选框checkbox的值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表