快捷導(dǎo)航

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

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

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

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

其中

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

<!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 對(duì)checkbox的操作</title>   </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需再刷新一下頁(yè)面才能執(zhí)行]

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

復(fù)制代碼代碼如下:

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

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了jQuery實(shí)現(xiàn)的五子棋游戲,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)五子棋游戲的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-06-06

jQuery html() in Firefox (uses .innerHTML) ignores DOM chang

Firefox doesn't update the value attribute of a DOM object based on user input, just its valueproperty - pretty quick work around exists.

2010-03-03

jQuery選擇器特殊字符與屬性空格問題

這篇文章主要介紹了jQuery選擇器特殊字符與屬性空格問題。通過選擇器中含有特殊符號(hào)的注意事項(xiàng)和選擇器中含有空格的注意事項(xiàng)詳細(xì)介紹了解決問題的辦法,需要的朋友可以參考下

2017-08-08

基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址

最近寫了兩個(gè)管理后臺(tái)的前端頁(yè)面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁(yè)是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.

2010-07-07