jquery獲取復(fù)選框checkbox的值的簡單實(shí)現(xiàn)方法
更新時(shí)間：2016年05月26日 10:58:40 投稿：jingxian
下面小編就為大家?guī)硪黄猨query獲取復(fù)選框checkbox的值的簡單實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
jQuery API :
each(callback) :以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)。
:checked :匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)
js:
//js獲取復(fù)選框值
var obj = document.getElementsByName("interest");//選擇所有name="interest"的對象，返回?cái)?shù)組
var s='';//如果這樣定義var s;變量s中會默認(rèn)被賦個null值
for(var i=0;i<obj.length;i++){
if(obj[i].checked) //取到對象數(shù)組后，我們來循環(huán)檢測它是不是被選中
s+=obj[i].value+','; //如果選中，將value添加到變量s中
}
jquery:
//jquery獲取復(fù)選框值
var chk_value =[];//定義一個數(shù)組
$('input[name="interest"]:checked').each(function(){//遍歷每一個名字為interest的復(fù)選框，其中選中的執(zhí)行函數(shù)
chk_value.push($(this).val());//將選中的值添加到數(shù)組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, // 使用$()屬性獲取當(dāng)前頁面輸入的用戶名和權(quán)限的值
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工具中的屬性獲取當(dāng)前頁面輸入的用戶名和權(quán)限的值，給后臺.java的hasPermission方法的參數(shù)賦值，再執(zhí)行此方法(不是void類型有返回值)得到個返回值。
function(data)
{
if(data)
{
document.getElementById("hp").checked = "checked"; // 使用byId()屬性獲取當(dāng)前頁面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方法執(zhí)行后的返回值，存在data變量中，在執(zhí)行function(data)方法的語句
}
function invoke1()
{
dwr.engine.setAsync(false);//<!-- 默認(rèn)是異步執(zhí)行的true，設(shè)置成false就是同步執(zhí)行 方法按順序執(zhí)行-->
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);//根據(jù)后臺數(shù)組值填充ID為selectid的列表
});
}
function invoke3(){
dwr.util.removeAllRows(tid);//根據(jù)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獲取復(fù)選框值
var obj = document.getElementsByName("interest");//選擇所有name="interest"的對象，返回?cái)?shù)組
var s='';//如果這樣定義var s;變量s中會默認(rèn)被賦個null值
for(var i=0;i<obj.length;i++){
if(obj[i].checked) //取到對象數(shù)組后，我們來循環(huán)檢測它是不是被選中
s+=obj[i].value+','; //如果選中，將value添加到變量s中
}
alert(s == '' ? '你還沒有選擇任何內(nèi)容！' :s);
dwr.util.setValue(tdid,s);
//jquery獲取復(fù)選框值
var chk_value =[];//定義一個數(shù)組
$('input[name="interest"]:checked').each(function(){//遍歷每一個名字為interest的復(fù)選框，其中選中的執(zhí)行函數(shù)
chk_value.push($(this).val());//將選中的值添加到數(shù)組chk_value中
});
alert(chk_value.length==0 ?'你還沒有選擇任何內(nèi)容！':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" >測試權(quán)限<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" >測試權(quán)限<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標(biāo)簽</div>
</td>
</tr>
</tbody>
<tr>
<td id="tdid"colspan="2" >修改此行值</td>
</tr>
</table>
</form>
<input type="button"name="button"value="異步調(diào)用測試" 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="獲取復(fù)選框值" onclick="getInfo()">
</form>
<div id="checkboxInfo" style="width: 100%; height: auto; display:block"></div>
</body>
</html>
以上這篇jquery獲取復(fù)選框checkbox的值的簡單實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
- jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法
- jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
- jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼
- JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡單實(shí)例
- jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼
- jQuery判斷checkbox選中狀態(tài)
- jQuery 更改checkbox的狀態(tài),無效的解決方法
相關(guān)文章
基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
這篇文章主要介紹了基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單，代碼簡單易懂，需要的朋友參考下2015-11-11
此篇文章給大家分享了jQuery pjax 應(yīng)用的一些簡單示例，希望可以幫助到大家2018-09-09
最近在做手機(jī)上的web app，很多場景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢和鼠標(biāo)點(diǎn)擊的，于是就基于jquery弄了一個，每一個參數(shù)有詳細(xì)的說明2012-07-07
jQuery中removeClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeClass()方法用法,實(shí)例分析了removeClass()方法的功能、定義及從匹配元素刪除一個或多個類的使用技巧,需要的朋友可以參考下2015-01-01
jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果
這篇文章主要為大家詳細(xì)介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JQuery移動頁面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動頁面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過相關(guān)兩個事件的添加來達(dá)到響應(yīng)移動設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery實(shí)現(xiàn)動態(tài)表單驗(yàn)證時(shí)文本框抖動效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動態(tài)表單驗(yàn)證時(shí)文本框抖動效果,可實(shí)現(xiàn)表單元素左右晃動的抖動功能,涉及jquery中元素的匹配與動畫animate效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
toggle一個div顯示或隱藏且可擴(kuò)展成自定義下拉框
本文為大家介紹下如何讓一個div顯示或隱藏且可擴(kuò)展成自定義下拉框，具體實(shí)現(xiàn)如下，感興趣的朋友可參考下，希望對大家有所幫助2013-09-09
jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06