JQuery操作單選按鈕以及復選按鈕示例
更新時間：2013年09月23日 09:24:01 作者：
單選按鈕以及復選按鈕的使用情況還是蠻多的，接下來為大家介紹下通過JQuery操作單選按鈕和復選按鈕，希望對大家有所幫助
單選按鈕以及復選按鈕在開發(fā)過程中會經常用到，下面我就來通過JQuery操作單選按鈕和復選按鈕：
單選按鈕：
通過JQuery獲取單選按鈕對象我們總共有三種途徑：
①ID：$("#radioId")
②NAME：$(":input[name='radioName']")
③TYPE：$("input[type=radio]")，可能在有的資料上面寫的是：$(""input[@type=radio]"")，這個的話跟你的JQuery版本有關系，如果是老版本的話就用后者，新版本就用前者，如果不知道自己的版本到底適合用哪一個的話就挨個試，反正一次嘗試就能搞定，而且還能學到知識，何樂而不為呢！
我們都知道，在一組單選按鈕當中只能使一個生效，要實現(xiàn)這種效果，很多人可能會認為把ID改為相同的就可，其實，你去嘗試一下就會知道，在一組單選按鈕中仍然可以選用多個。因為，實現(xiàn)此效果的關鍵屬性不是ID，而是NAME。
介紹完了之后，我們投入到只用當中吧：
我們獲取完單選按鈕的對象之后，就得對此對象進行遍歷，因為，此對象的類型是一個數組，我們要挨個對其進行判斷是否被選中，然后再從選中的按鈕中取出所需要的值，示例代碼如下：
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就是我想獲取的值，前面那個value可能大家會看得懂，而后面那個ID有的人可能會犯迷糊。在此，我就進行一下擴展：在JS中所有的對象都可以直接通過“.”來獲取屬性的值。
復選框：
關于復選框，我們需要的只是“全選和反選”的效果，使用JQuery的話只要一句話就可以搞定，如下：
var checkedObj = $('input:checkbox[name="checkbox"]:checked');
var values = "";
checkedObj.each(function() {
var value=this.value + ",";
values += value;
});
好啦，通過上面的兩段代碼你就可以操作復選框和單選按鈕啦！
單選按鈕：
通過JQuery獲取單選按鈕對象我們總共有三種途徑：
①ID：$("#radioId")
②NAME：$(":input[name='radioName']")
③TYPE：$("input[type=radio]")，可能在有的資料上面寫的是：$(""input[@type=radio]"")，這個的話跟你的JQuery版本有關系，如果是老版本的話就用后者，新版本就用前者，如果不知道自己的版本到底適合用哪一個的話就挨個試，反正一次嘗試就能搞定，而且還能學到知識，何樂而不為呢！
我們都知道，在一組單選按鈕當中只能使一個生效，要實現(xiàn)這種效果，很多人可能會認為把ID改為相同的就可，其實，你去嘗試一下就會知道，在一組單選按鈕中仍然可以選用多個。因為，實現(xiàn)此效果的關鍵屬性不是ID，而是NAME。
介紹完了之后，我們投入到只用當中吧：
我們獲取完單選按鈕的對象之后，就得對此對象進行遍歷，因為，此對象的類型是一個數組，我們要挨個對其進行判斷是否被選中，然后再從選中的按鈕中取出所需要的值，示例代碼如下：
復制代碼 代碼如下:
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就是我想獲取的值，前面那個value可能大家會看得懂，而后面那個ID有的人可能會犯迷糊。在此，我就進行一下擴展：在JS中所有的對象都可以直接通過“.”來獲取屬性的值。
復選框：
關于復選框，我們需要的只是“全選和反選”的效果，使用JQuery的話只要一句話就可以搞定，如下：
復制代碼 代碼如下:
var checkedObj = $('input:checkbox[name="checkbox"]:checked');
var values = "";
checkedObj.each(function() {
var value=this.value + ",";
values += value;
});
好啦，通過上面的兩段代碼你就可以操作復選框和單選按鈕啦！
相關文章
瀏覽者是否對網站感興趣，前20秒的第一印象至關重要，所以我們的設計要符合大眾的期望。下面我們將設計一個個性的導航菜單。2009-12-12
ASP.NET jQuery 實例16 通過控件CustomValidator驗證RadioButtonList
上一節(jié)已經介紹過控件CustomValidator的使用方法，下面直接看代碼2012-02-02
jQuery 使用on綁定動態(tài)生成的元素時，不能直接用該對象操作，而是選擇其非動態(tài)生成的父節(jié)點然后再找到本身才能達到效果。大家看看源碼就知道了。2015-04-04
一步一步學jquery UI 1.72 之datepicker，中間都寫了注釋方便大家學習。2009-12-12
jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可以編輯的表格,涉及jQuery響應鼠標事件動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2016-07-07
自己寫的 ToolTip提示插件,書寫過程很認真的,希望大家支持我，給我點評論,感興趣的朋友可以了解下哦，希望本文對你有所幫助2013-01-01
關于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12
jQuery實現(xiàn)的動態(tài)伸縮導航菜單實例
這篇文章主要介紹了jQuery實現(xiàn)的動態(tài)伸縮導航菜單,實例分析了jQuery鼠標事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05
將JavaScript的jQuery庫中表單轉化為JSON對象的方法
這篇文章主要介紹了將JavaScript的jQuery庫中表單轉化為JSON對象的方法,包括對序列化時空格問題的處理方法,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jQuery實現(xiàn)響應鼠標滾動的動感菜單效果,可實現(xiàn)鼠標滑過菜單項呈現(xiàn)文字上下滑動變換的效果,涉及jQuery頁面元素樣式的動態(tài)設置技巧,需要的朋友可以參考下2015-09-09