使用jQuery獲取radio/checkbox組的值的代碼收集

更新時間：2009年12月24日 02:04:23 作者：

很久沒有寫JQuery的文章了。今天來看下JQ對天Checkbox復選框的操作?？聪旅娴囊粋€小例子。在這個例子中包括了以下幾個功能

 
<!-- 
$("document").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); 
}) 
}) 
--> 

其中

復制代碼代碼如下:

 
$("[name='checkbox'][checked]").each(function(){ 
str+=$(this).val()+"\r\n"; //alert($(this).val()); 
}) 

這部分代碼在FireFox無法正常工作，在網(wǎng)上查找后，發(fā)現(xiàn)了一個方法可以正常使用，如下所示：

復制代碼代碼如下:

 
$("[name='checkbox']:checked").each(function(){ 
str+=$(this).val()+"\r\n"; //alert($(this).val()); 
}) 

即：使用$("[name='checkbox']:checked")這種方法才可以正確取到radio/checkbox組的被選中的控件的集合
運行后，需要刷新下

<!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=gb2312" /> <title>louis-blog >> jQuery 對checkbox的操作</title> <script type='text/javascript' src="http://img.jb51.net/jslib/jquery/jquery.js"></script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <body style="text-align:center;margin: 0 auto;font-size: 12px;"> <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;"> <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><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 </form> </div> </body> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

jQuery中取得checkbox組中被選中的值

復制代碼代碼如下:

var selectText; 
$(":checkbox[name=yourcheckname]:checked").each(function(){ 
selectText+=$(this).val()+','; 
}) 

您可能感興趣的文章:

jQuery自定義滾動條完整實例
這篇文章主要介紹了jQuery自定義滾動條,以完整實例形式分析了jQuery響應scroll事件及鼠標事件實現(xiàn)滾動條效果的相關技巧,需要的朋友可以參考下
2016-01-01
jQuery使用jsonp實現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實現(xiàn)百度搜索，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
模仿jQuery each函數(shù)的鏈式調(diào)用
模仿jQuery each函數(shù)的鏈式調(diào)用實現(xiàn)代碼。
2009-07-07
jquery中表單多選框的一種巧妙寫法
這篇文章主要介紹了jquery 表單多選框的一種巧妙寫法 ,需要的朋友可以參考下
2015-09-09
jQuery給表格添加分頁效果
這篇文章主要為大家詳細介紹了利用jQuery給表格添加分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
關于jquery append() html時的小問題的解決方法
關于jquery append() html時的小問題，碰到類似問題的朋友可以參考下。
2010-12-12
選擇器中含有空格在使用示例及注意事項
帶空格表示的是選擇class為test里面隱藏的元素；不帶空格表示的是選擇隱藏的class為test的元素，在使用過程中一定需要注意下
2013-07-07
模擬jQuery中的ready方法及實現(xiàn)按需加載css,js實例代碼
這篇文章介紹了模擬jQuery中的ready方法及實現(xiàn)按需加載css,js實例代碼，有需要的朋友可以參考一下
2013-09-09
基于jQuery的日期選擇控件
終于把jQuery拼寫正確了哈，哈哈javascript也是區(qū)分大小寫的,所以確實不能寫錯，今天我來和大家分享的是日期選擇控件的實現(xiàn)，功能也許不夠強大，但是能夠滿足需求。
2009-10-10
Javascript jquery css 寫的簡單進度條控件
很多的時候用戶需要等待你“臃腫”的 Javascript 代碼處理完成（Web 2.0 的特色）。期間或許加入一個類似于進度條的東西讓用戶有點“安慰”。這個東西實現(xiàn)起來并不復雜，無非就是獲得總的處理條目，然后獲得一個百分比，再顯示輸出。
2008-03-03