JQuery操作單選按鈕以及複選按鈕範例_jquery

單選按鈕以及複選按鈕在開發過程中會常用到，下面我就來透過JQuery操作單選按鈕和複選按鈕：

單選按鈕：

透過JQuery取得單選按鈕物件我們總共有三種途徑：

①ID：$("#radioId")

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

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

我們都知道，在一組單選按鈕當中只能使一個生效，要實現這種效果，很多人可能會認為把ID改為相同的就可，其實，你去嘗試一下就會知道，在一組單選按鈕中仍然可以選用多個。因為，實現此效果的關鍵屬性不是ID，而是NAME。

介紹完了之後，我們投入到只用當中吧：

我們取得完單選按鈕的物件之後，就得對此物件進行遍歷，因為，此物件的類型是一個數組，我們要挨個判斷是否被選中，然後再從選中的按鈕中取出所需的值，範例程式碼如下：

複製程式碼 程式碼如下:

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

result就是我想取得的數值，前面那個value可能大家會看得懂，而後面那個ID有的人可能會犯迷糊。在此，我就進行一下擴充：在JS中所有的物件都可以直接透過「.」來取得屬性的值。

複選框：

關於複選框，我們需要的只是「全選和反選」的效果，使用JQuery的話只要一句話就可以搞定，如下：

複製程式碼 程式碼如下:

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

好啦，透過上面的兩段程式碼你就可以操作複選框和單選按鈕啦！