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