JQuery操作選項按鈕以及複選按鈕樣本

來源:互聯網
上載者:User

選項按鈕以及複選按鈕在開發過程中會經常用到,下面我就來通過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;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;
});

好啦,通過上面的兩段代碼你就可以操作複選框和選項按鈕啦!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.