jquery获取复选框checkbox的值的简单实现方法
jQueryAPI:
:checked
js:
//js获取复选框值
varobj=document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组
vars='';//如果这样定义vars;变量s中会默认被赋个null值
for(vari=0;i<obj.length;i++){
if(obj[i].checked)//取到对象数组后，我们来循环检测它是不是被选中
s+=obj[i].value+',';//如果选中，将value添加到变量s中
}
jquery:
//jquery获取复选框值
varchk_value=[];//定义一个数组
$('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数
chk_value.push($(this).val());//将选中的值添加到数组chk_value中
});
其中jsp页面代码
<%@pagelanguage="java"contentType="text/html"import="java.util.*"pageEncoding="GBK"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//basePath=http://127.0.0.1:8080/DWR_checkbox/
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>DWR获取浏览器页面信息</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"src="jquery-1.7.2.js"></script>
<scripttype='text/javascript'src='<%=path%>/dwr/engine.js'></script>
<scripttype='text/javascript'src='<%=path%>/dwr/util.js'></script>
<scripttype='text/javascript'src='<%=path%>/dwr/interface/test.js'></script>
<scripttype='text/javascript'src='<%=path%>/dwr/interface/test1.js'></script>
<scripttype='text/javascript'src='<%=path%>/dwr/interface/userLogin.js'></script>
<scripttype="text/javascript">
functionceshi1()
{
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;
});
}
functionceshi2()
{
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)方法的语句
}
functioninvoke1()
{
dwr.engine.setAsync(false);//<!--默认是异步执行的true，设置成false就是同步执行方法按顺序执行-->
test1.method1(
function(data){
alert(data);
}
);
test1.method2(
function(data){
alert(data);
}
);
}
functioninvoke2(){
test.getArray(
function(data)
{
//for(vari=0;i<data.length;i++){
//alert(data[i]);
//}
dwr.util.addOptions(selectid,data);//根据后台数组值填充ID为selectid的列表
});
}
functioninvoke3(){
dwr.util.removeAllRows(tid);//根据tbody的id删除该tbody
}
functioninvoke4(){
vara=dwr.util.getText(selectid);
dwr.util.setValue(tdid,a);
}
functionshow()
{
varname=document.getElementById("user").value;
varpass=document.getElementById("pass").value;
varobj=newobjBean(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;
});
}
functionobjBean(name,pass)
{
this.username=name;
this.password=pass;
}
functiongo_to()
{
$('#first_jsp').show();
test.getInclude(function(data){
$('#first_jsp').html(data);
});
}
functiongo_to_iframe()
{
$("#myframe1").show();
test.getIncludeBean(function(data){
$('#myframe1').attr('src',"<%=basePath%>"+data);
});
}
functiongetInfo(){
//js获取复选框值
varobj=document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组
vars='';//如果这样定义vars;变量s中会默认被赋个null值
for(vari=0;i<obj.length;i++){
if(obj[i].checked)//取到对象数组后，我们来循环检测它是不是被选中
s+=obj[i].value+',';//如果选中，将value添加到变量s中
}
alert(s==''?'你还没有选择任何内容！':s);
dwr.util.setValue(tdid,s);
//jquery获取复选框值
varchk_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>
<bodyid="body">
<form>
<tableid="tableid"border="1"align="center">
<tr><td>用户名：</td><td><inputid="user"type="text"name="username"/></td></tr>
<tr><td>密码：</td><td><inputid="pass"type="text"name="password"/></td></tr>
<tr>
<td><inputid="getInfo"type="button"value="获取信息"onclick="show()"/></td>
<td><inputtype="reset"value="重置"/></td>
</tr>
<tbodyid="tid">
<tr>
<tdcolspan="2">
<inputid="hp1"type="checkbox"name="hpname">测试权限<br>
<inputtype="button"name="button"value="测试1"onclick="ceshi1()">
返回值：<inputid="boolean1"type="text"/>
</td>
</tr>
<tr>
<td>
<inputid="hp"type="checkbox"name="hpname">测试权限<br>
<inputtype="button"name="button"value="测试2"onclick="ceshi2()">
</td>
<td>
返回值：<inputid="boolean2"type="text"/>
dwr.util.setValue:<inputid="boolean3"type="text"/>
<divid="div">这是一个div标签</div>
</td>
</tr>
</tbody>
<tr>
<tdid="tdid"colspan="2">修改此行值</td>
</tr>
</table>
</form>
<inputtype="button"name="button"value="异步调用测试"onclick="invoke1()">
<inputtype="button"name="button"value="加载Array值"onclick="invoke2()">
<inputtype="button"name="button"value="删除所有行"onclick="invoke3()">
<inputtype="button"name="button"value="修改行值"onclick="invoke4()">
<div>
<selectid="selectid"></select>
</div>
<inputtype="button"name="button"value="框架(iframe)中加载bean.jsp"onclick="go_to_iframe()">
<inputtype="button"name="button"value="DIV中加载first.jsp"onclick="go_to()">
<iframeid="myframe1"style="width:500;height:200;border:10px;padding:0px;display:none"src=""></iframe>
<divid="first_jsp"style="width:100%;height:auto;display:none"></div>
<form>
<inputtype="checkbox"name="interest"value="VC"/>VC
<inputtype="checkbox"name="interest"value="VB"/>VB
<inputtype="checkbox"name="interest"value="VFoxpro"/>VFoxpro
<inputtype="checkbox"name="interest"value="VJava"/>VJava
<inputtype="checkbox"name="interest"value="BC"/>BC
<inputtype="checkbox"name="interest"value="Cobol"/>COobol
<inputtype="checkbox"name="interest"value="Java"/>Java
<inputtype="checkbox"name="interest"value="Delphi"/>Delphi
<inputtype="button"value="获取复选框值"onclick="getInfo()">
</form>
<divid="checkboxInfo"style="width:100%;height:auto;display:block"></div>
</body>
</html>
以上这篇jquery获取复选框checkbox的值的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。