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

时间：2021-05-26

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的值实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章