jQuery獲取checkbox選中的值

更新時間：2016年01月28日 14:58:48 投稿：mrr

jquery checkbox選擇器在程序開發(fā)中經(jīng)常會用到，接下來通過實例代碼給大家介紹jquery獲取checkbox選中的值，需要的朋友參考下

1、問題背景

有幾個多選框，選擇其中的幾個，獲取選中的值

2、設計結(jié)果如下圖所示：

3、設計源碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery獲取checkbox選中的值</title> 
<script type="text/javascript" src="jquery-2.2.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input[name='ckb']:checkbox").click(function() { 
var str = ""; 
$("input[name='ckb']:checkbox").each(function() { 
if($(this).is(":checked")) 
{ 
str += $(this).attr("value")+","; 
} 
}); 
if(str != null && str.length > 1) 
{ 
str = str.substring(0,str.length-1); 
} 
alert(str); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="checkbox" name="ckb" value="1"/>蘋果 
<input type="checkbox" name="ckb" value="2"/>橘子 
<input type="checkbox" name="ckb" value="3"/>梨子 
<input type="checkbox" name="ckb" value="4"/>香蕉 
</body> 
</html>

下面給大家分享一段代碼關于jQuery操作CheckBox的方法(選中,取消,取值)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New document．nbsp;</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
$("document．quot;).ready(function(){ 
$("#btn1").click(function(){ 
$("[name='checkbox']").attr("checked",'true');//全選 
}) 
$("#btn2").click(function(){ 
$("[name='checkbox']").removeAttr("checked");//取消全選 
}) 
$("#btn3").click(function(){ 
$("[name='checkbox']:even").attr("checked",'true');//選中所有奇數(shù) 
}) 
$("#btn4").click(function(){ 
$("[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked",'true'); 
} 
}) 
}) 
$("#btn5").click(function(){ 
var str=""; 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+""r"n"; 
//alert($(this).val()); 
}) 
alert(str); 
}) 
}) 
//--> 
</SCRIPT> 
</HEAD> 
<BODY> 
<form name="form1" method="post" action=""> 
<input type="button" id="btn1" value="全選"> 
<input type="button" id="btn2" value="取消全選"> 
<input type="button" id="btn3" value="選中所有奇數(shù)"> 
<input type="button" id="btn4" value="反選"> 
<input type="button" id="btn5" value="獲得選中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</form>

以上所述是小編給大家分享的jQuery獲取checkbox選中的值，希望對大家有所幫助。

您可能感興趣的文章:

基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼
今天看到一個網(wǎng)站的公告欄一個小效果，如果有2條公告或以上就有個滾動效果，特整理下分享給大家
2012-05-05
jquery跟隨屏幕滾動效果的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query跟隨屏幕滾動效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-04-04
jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù)示例
這篇文章主要介紹了jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù),需要的朋友可以參考下
2014-04-04
jQuery實現(xiàn)微信長按識別二維碼功能
這篇文章主要介紹了jQuery實現(xiàn)微信長按識別二維碼的功能，非常不錯，具有參考借鑒價值，對jquery長按識別二維碼的相關知識感興趣的朋友一起學習吧
2016-08-08
jQuery實現(xiàn)天貓商品放大鏡效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)天貓商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
jQuery Timelinr實現(xiàn)垂直水平時間軸插件(附源碼下載)
jquery.timelinr.js是一款效果非常炫酷的jQuery時間軸插件。下面腳本之家小編給大家介紹jQuery Timelinr實現(xiàn)垂直水平時間軸插件，需要的朋友參考下
2016-02-02
JQuery Mobile 彈出式登錄框的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query Mobile 彈出式登錄框的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jquery限定文本框只能輸入數(shù)字（整數(shù)和小數(shù)）
這篇文章主要介紹了jquery限定文本框只能輸入數(shù)字，包括整數(shù)和小數(shù)，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運算與頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下
2018-07-07
jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)根據(jù)日期計算星期幾的方法,涉及jQuery針對日期時間簡單計算相關操作技巧,需要的朋友可以參考下
2019-01-01