提供您平價又專業的搬家服務
免費提供紙箱及拆裝,到府估價安心合理
拆除提供無接縫招牌、霓虹招牌、壓克力燈箱
LED等設計製作安裝,工廠直營,價格超優惠

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 取得表單資料、單選 Radio 與多選 Checkbox

房東:林先生
發表時間:2013-07-11
[檢舉]


透過 jQuery 取得 HTML 表單資料其實不難,但每次遇到要取得 Radio 單選選項的選取值與 Checkbox 多選的選取值都要花些時間查詢取值的方法,網路上能搜尋到的方法也大多是舊版 jQuery 的語法已經不適用了,因此特別撰文筆記一下,也順便把取得各式 HTML 表單欄位的方法做個整理。



1. 取得文字欄位內容的方法 ( text, textarea, password )



$(\'input[name=\"firstname\"]\').val();


 


2. 取得(單選)下拉選單的方法 ( select )



$(\'select[name=\"cars1\"]\').val();


 


3. 取得(多選)下拉選項的方法 ( select multiple )


取得多選的下拉選單在 jQuery 裡面還算簡單,用法跟單選的下拉選單差不多,唯一需要注意的是回傳的型別不再是字串,而是一個字串陣列,即便你選中的只有一個,回傳的型別依然是個陣列,如下範例:



var selectedValues = $(\'select[name=\"cars2\"]\').val() || [];


注意:如果沒有任何一項被點選的話,上述程式回傳的型別會是 undefined 喔,也因此建議各位在撰寫取得多選下拉選單的值時可以運用上述技巧,當無回傳值時也回傳一個空的陣列,以避免程式因為誤判為陣列而導致 JavaScript 發生例外狀況!


 


4. 取得(單選)選項的方法 ( radio )


多個 radio 會共用一個欄位名稱,同名的 radio 項目只會有一個被選中,因此可以透過 :checked 選取器幫我們選出被使用者選取的項目,如下範例:



$(\'input:radio:checked[name=\"gender\"]\').val();


注意:如果沒有任何一項被點選的話,上述程式回傳的型別會是 undefined 喔!


 


5. 取得(多選)選項的方法 ( checkbox )


這方法就麻煩了些,因為 Checkbox 是可以多選的,而且這些多選的選項都擁有相同的欄位名稱,而 jQuery 對於處理 checkbox 的方式並不像 多選下拉選單 (select multiple) 直接回傳陣列那樣直覺,如果你用以下程式碼撰寫程式,得到的將只會有「第一個勾選項目」的值,並非所有勾選項目的完整內容!

( 以下為錯誤示範,切勿照抄!! )



$(\'input:checkbox:checked[name=\"vehicle\"]\').val();


若你想取得所有勾選項目值為一個陣列,寫法稍微複雜一些些,第一種寫法要先定義好一個陣列再透過 .each() 取值:



var cbxVehicle = new Array();
$(\'input:checkbox:checked[name=\"vehicle\"]\').each(function(i) { cbxVehicle[i] = this.value; });


另一個寫法是透過 .map() 將回傳值轉譯成為另一種陣列,如下:



$(\'input:checkbox:checked[name=\"vehicle\"]\').map(function() { return $(this).val(); }).get();


另外還有一種解法,就是透過 jQuery Batch Plugin 來取值,載入這個 Plugin 後,程式碼變成如下:



$(\'input:checkbox:checked[name=\"vehicle\"]\').vals()

 

http://blog.miniasp.com/post/2011/04/26/jQuery-get-form-value-Checkbox-Radio.aspx





  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務

  • 1 樓住戶:jack
    發表時間:2014-10-17
    [檢舉]

    //獲取一組radio被選中項的值
    var item = $('input[@name=items][@checked]').val();
    //獲取select被選中項的文本
    var item = $("select[@name=items] option[@selected]").text();
    //select下拉框的第二個元素為當前選中值
    $('#select_id')[0].selectedIndex = 1;
    //radio單選組的第二個元素為當前選中值
    $('input[@name=items]').get(1).checked = true;
    獲取值:

    //文本框,文本區域:
    $("#txt").attr("value");
    //多選框checkbox:
    $("#checkbox_id").attr("value");
    //單選組radio:
    $("input[@type=radio][@checked]").val();
    //下拉框select:
    $('#sel').val();
    控制表單元素:

    文本框,文本區域:

    $("#txt").attr("value",''); //清空內容
    $("#txt").attr("value",'11');//填充內容

    多選框checkbox:

    $("#chk1").attr("checked",'');//不打勾
    $("#chk2").attr("checked",true);//打勾
    if($("#chk1").attr('checked')==true) //判斷是否已經打勾

    單選組radio:

    $("input[@type=radio]").attr("checked",'2');//設置value=2的項目為當前選中項

    下拉框select:

    $("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項
    $("1111").appendTo("#sel");//添加下拉框的option
    $("#sel").empty();//清空下拉框

    2 樓住戶:小白
    發表時間:2014-10-23
    [檢舉]

    [jQuery] 指定select為選取狀態
    範例 HTML

    3 樓住戶:checkbox arry
    發表時間:2015-01-26
    [檢舉]

    i want to know,
    how to get the valus?
    ex:
    card
    card1
    card2
    card3

    送出後 打勾不會取消 << 如何讓他執行




     共 3 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容: