專業拆除裝潢、鐵皮屋等各式建築物,清貨倉、雜物等
廢棄物清運,安全高效率,客戶口碑肯定
松山搬家公司提供裝潢細清、洗地打蠟、清洗水塔等清潔服務
所到之處不留塵埃,全省清潔服務人員輕鬆找

首頁  •  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
    <select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
    </script>

    jQuery code
    <script>
    $('#selectBox option[value=C]').attr('selected', 'selected');
    </script>

    在網頁裡就會顯示"Number 2"




    取得目前點選的val值
    <script>
    $("#selectBox").change(function(){
    var t = $(this).val();
    })
    </script>

    3 樓住戶:checkbox arry
    發表時間:2015-01-26

    i want to know,
    how to get the valus?
    ex:
    <input type="checkbox" name="ticket[]" value="card"/>card
    <input type="checkbox" name="ticket[]" value="card1"/>card1
    <input type="checkbox" name="ticket[]" value="card2"/>card2
    <input type="checkbox" name="ticket[]" value="card3"/>card3

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




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

    姓名:
    佈告內容:
    其他選項: