快捷導(dǎo)航

JQuery操作單選按鈕以及復(fù)選按鈕示例

更新時(shí)間：2013年09月23日 09:24:01 作者：

單選按鈕以及復(fù)選按鈕的使用情況還是蠻多的，接下來為大家介紹下通過JQuery操作單選按鈕和復(fù)選按鈕，希望對(duì)大家有所幫助

單選按鈕以及復(fù)選按鈕在開發(fā)過程中會(huì)經(jīng)常用到，下面我就來通過JQuery操作單選按鈕和復(fù)選按鈕：

單選按鈕：

通過JQuery獲取單選按鈕對(duì)象我們總共有三種途徑：

①ID：$("#radioId")

②NAME：$(":input[name='radioName']")

③TYPE：$("input[type=radio]")，可能在有的資料上面寫的是：$(""input[@type=radio]"")，這個(gè)的話跟你的JQuery版本有關(guān)系，如果是老版本的話就用后者，新版本就用前者，如果不知道自己的版本到底適合用哪一個(gè)的話就挨個(gè)試，反正一次嘗試就能搞定，而且還能學(xué)到知識(shí)，何樂而不為呢！

我們都知道，在一組單選按鈕當(dāng)中只能使一個(gè)生效，要實(shí)現(xiàn)這種效果，很多人可能會(huì)認(rèn)為把ID改為相同的就可，其實(shí)，你去嘗試一下就會(huì)知道，在一組單選按鈕中仍然可以選用多個(gè)。因?yàn)?，?shí)現(xiàn)此效果的關(guān)鍵屬性不是ID，而是NAME。

介紹完了之后，我們投入到只用當(dāng)中吧：

我們獲取完單選按鈕的對(duì)象之后，就得對(duì)此對(duì)象進(jìn)行遍歷，因?yàn)?，此?duì)象的類型是一個(gè)數(shù)組，我們要挨個(gè)對(duì)其進(jìn)行判斷是否被選中，然后再?gòu)倪x中的按鈕中取出所需要的值，示例代碼如下：

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

 
var itemradio = $("input[type=radio]"); 
result=""; 
nums = itemradio.length; 
for(i=0;i<nums;i++) { 
if(itemradio[i].checked){ 
result = itemradio[i].value+","+itemradio[i].id+";"+result; 
} 
} 

result就是我想獲取的值，前面那個(gè)value可能大家會(huì)看得懂，而后面那個(gè)ID有的人可能會(huì)犯迷糊。在此，我就進(jìn)行一下擴(kuò)展：在JS中所有的對(duì)象都可以直接通過“.”來獲取屬性的值。

復(fù)選框：

關(guān)于復(fù)選框，我們需要的只是“全選和反選”的效果，使用JQuery的話只要一句話就可以搞定，如下：

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

 
var checkedObj = $('input:checkbox[name="checkbox"]:checked'); 
var values = ""; 
checkedObj.each(function() { 
var value=this.value + ","; 
values += value; 
}); 

好啦，通過上面的兩段代碼你就可以操作復(fù)選框和單選按鈕啦！

您可能感興趣的文章: