如何使用jQuery獲取輸入類型？

112

我有一個頁面，輸入類型總是變化，我需要取決於輸入類型的值。所以如果類型是一個無線電，我需要得到哪個被選中，如果它是一個複選框，我現在需要檢查哪一個，如果它是一個下拉列表，我需要知道選擇了哪一個，如果它是一個文本/ textarea我需要知道的價值觀。如何使用jQuery獲取輸入類型？

任何想法如何做到這一點？

來源

2010-07-02 Luci

你們全都取決於輸入的ID，但在無線電或複選框的情況下，我應該有相同的ID？知道該ID必須是唯一的。 – Luci 2010-07-02 12:11:35

207

EDIT 2月1日，2013年由於這個答案的關於性的普及和1.9版本（2.0）更改到jQuery和屬性，我在訪問輸入，按鈕和某些選擇的屬性/屬性時，添加了一些註釋和小提琴以查看它是如何工作的。這裏的小提琴：http://jsfiddle.net/pVBU8/1/

得到所有的輸入：

var allInputs = $(":input");

得到所有的輸入類型：

allInputs.attr('type');

獲取值：

allInputs.val();

注意： .val（）不一樣如：檢查那些相關的類型。使用：

.attr("checked");

編輯2013年2月1日 - 回覆：jQuery的1.9使用道具（）不ATTR（）與attr不會爲已更改屬性返回正確的價值觀。

.prop('checked');

或者乾脆

$(this).checked;

拿到支票的價值 - 不管它是目前。或者只需要使用'：checked'，如果你只想檢查那些。

編輯：這裏是另一種方式來獲得類型：

var allCheckboxes=$('[type=checkbox]');

EDIT2：注意的形式：

$('input:radio');

尤佳在

$(':radio');

這兩者劃上等號到：

$('input[type=radio]');

但「輸入」期望所以它只被輸入，並且不使用通用「*」當使用的$(':radio')形式，其等同於$('*:radio');

EDIT 2015年8月19日：偏愛應該使用$('input[type=radio]');，然後允許現代瀏覽器優化對無線電輸入的搜索。

EDIT 2013年2月1日每評論重新：選擇元素 @dariomac

$('select').prop("type");

將返回「中選擇一」取決於「多重」屬性或「選擇-多個」和

$('select')[0].type

如果存在，則返回相同的第一個選擇。和

($('select')[0]?$('select')[0].type:"howdy")

將返回類型，如果它存在或「好嗨」，如果它沒有。

$('select').prop('type');

如果它存在或「不確定」，如果不存在返回DOM中第一個的財產。

$('select').type

返回第一個存在的類型或存在錯誤的情況。

來源

2010-07-02 12:21:35

我試過這個： var type = $（「：input [name =」+ name +「]」）。attr（'type'）; 它工作！謝謝。 – Luci 2010-07-02 12:31:22

那麼「下拉」或選擇輸入...？因爲這不是輸入標籤...我現在有同樣的問題，但我想使用類型dom屬性... – dariomac 2013-02-01 11:45:15

@dariomac - 請參閱我的編輯和jQuery 1.9+版本引用 – 2013-02-01 17:44:17

你可以做到以下幾點：

var inputType = $('#inputid').attr('type');

來源

2010-07-02 11:58:52 xil3

這是否意味着我必須給每個收音機/檢查相同的ID？ – Luci 2010-07-02 12:06:11

@zeina - *永遠不會給元素相同的ID。 – user113716 2010-07-02 12:11:53

@ patrick-我知道id必須是唯一的，但他們爲什麼建議通過id來獲得輸入類型，並且我可能有收音機和複選框，我將依賴他們的名字？！ – Luci 2010-07-02 12:15:43

$("#yourobj").attr('type');

來源

2010-07-02 11:59:12 Ergec

GetValue = function(id) { 
    var tag = this.tagName; 
    var type = this.attr("type"); 

    if (tag == "input" && (type == "checkbox" || type == "radio")) 
    return this.is(":checked"); 

    return this.val(); 
};

來源

2010-07-02 12:02:35

+1來使用這種方式。 – Chris22 2014-10-13 23:09:16

開始尋找最好的地方是 http://api.jquery.com/category/selectors/

這會給你一套好的例子。

最近在DOM中選擇元素是使用CSS選擇器來實現的，所以如果你想通過id獲得元素，你會想要使用$（'＃elementId'），如果你想所有的輸入標籤使用$（ '輸入'），最後我想你會想要的部分，如果你想要所有的輸入標籤類型的複選框使用$（'輸入，[類型=複選框]）

注意：你會發現大部分你想要的值是對屬性，這樣的屬性CSS選擇是：[=的attributeName值]

只是因爲你問下拉作爲aposed到列表框嘗試以下操作：


$('select, [size]).each(function(){ 
    var selectedItem = $('select, [select]', this).first(); 
});

的代碼是從內存中，因此請accound的小錯誤

來源

2010-07-02 12:11:57 Robert

這裏提到的'[size]'是什麼？ – Stranger 2015-08-19 05:54:55

@Udhayakumar'[size]'將過濾結果，只包含具有size屬性的select元素，因此只有列表框被選中，而不是下拉列表。 – Robert 2015-08-19 07:49:44

列表框 - >你的意思是文本框？ – Stranger 2015-08-19 09:39:11

var val = $('input:checkbox:checked, input:radio:checked, \ 
    select option:selected, textarea, input:text', 
    $('#container')).val();

評論：

我假設，這正是有一個形式元件，這可以是一個textarea，輸入字段中，選擇的形式，一組單選按鈕或單個複選框（如果您需要更多複選框，您將不得不更新我的代碼）。
所討論的元素存在於ID爲container的元素中（以消除頁面上其他元素的混淆）。
然後代碼將返回它找到的匹配元素的第一個的值。由於我使用的是:checked等等，這應該總是正是你要找的價值。

來源

2010-07-02 12:31:52 Boldewyn

如果你的意思是，你想要得到的是具有無需擔心輸入型值的表單中的所有輸入，試試這個：

例子：http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() { 
    return $.trim(this.value) != ''; 
});

現在您應該擁有一組具有一定價值的輸入元素。

你可以把這些值在數組中：

var array = $inputs.map(function(){ 
    return this.value; 
}).get();

或者你可以它們序列：

var serialized = $inputs.serialize();

來源

2010-07-02 12:40:09 user113716

這似乎是在ATTR功能得到進一步棄用

$(this).attr('TYPE') 
undefined 
$(this).prop('type') 
"text"

來源

2015-05-14 18:11:05

在我的應用程序中，我結束了兩個具有相同ID（不好）的不同元素。一個元素是一個div，另一個元素是一個輸入。我試圖總結我的投入，並花了我一段時間來實現重複ID。通過將我＃前面想要的元素的類型，我能夠搶輸入元素的值並丟棄DIV：

$("input#_myelementid").val();

我希望它能幫助。

來源

2016-05-23 14:33:53 Tibi

如何使用jQuery獲取輸入類型？

回答

相關問題