歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery操作單選按鈕以及復選按鈕

單選按鈕以及復選按鈕在開發過程中會經常用到,下面我就來通過JQuery操作單選按鈕和復選按鈕:

單選按鈕:

通過JQuery獲取單選按鈕對象我們總共有三種途徑:

①ID:$("#radioId")

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

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

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

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

我們獲取完單選按鈕的對象之後,就得對此對象進行遍歷,因為,此對象的類型是一個數組,我們要挨個對其進行判斷是否被選中,然後再從選中的按鈕中取出所需要的值,示例代碼如下:

  1. var itemradio = $("input[type=radio]");  
  2.         result="";  
  3.         nums = itemradio.length;  
  4.         for(i=0;i<nums;i++)    {  
  5.                if(itemradio[i].checked){    
  6.                    result = itemradio[i].value+","+itemradio[i].id+";"+result;  
  7.                }  
  8.         }  
result就是我想獲取的值,前面那個value可能大家會看得懂,而後面那個ID有的人可能會犯迷糊。在此,我就進行一下擴展:在JS中所有的對象都可以直接通過“.”來獲取屬性的值。

復選框:

關於復選框,我們需要的只是“全選和反選”的效果,使用JQuery的話只要一句話就可以搞定,如下:

  1. var checkedObj = $('input:checkbox[name="checkbox"]:checked');  
  2.         var values = "";  
  3.         checkedObj.each(function() {   
  4.             var value=this.value + ",";   
  5.             values += value;  
  6.         });  
好啦,通過上面的兩段代碼你就可以操作復選框和單選按鈕啦!!!
Copyright © Linux教程網 All Rights Reserved