2010-07-02 6 views
112

У меня есть страница, где тип ввода всегда меняется, и мне нужно получить значения в зависимости от типа ввода. Так что, если тип - это радио, мне нужно получить, который проверен, и если это флажок, мне нужно, чтобы они были проверены, и если это падение, мне нужно знать, какой из них выбран, и я, если это text/textarea Мне нужно знать значения.Как получить тип ввода с помощью jquery?

Любая идея о том, как это сделать?

+2

Ребята, вы все в зависимости от входного идентификатора, но в случае радио или флажка я должен иметь один и тот же идентификатор? зная, что идентификатор должен быть уникальным. – Luci

ответ

207

EDIT 1 февраля 2013 г. Из-за популярности этого ответа и изменений в JQuery в версии 1.9 (и 2.0) относительно свойств и атрибутов, я добавлены некоторые примечания и скрипка, чтобы увидеть, как это работает при доступе к свойствам/атрибутам на входе, кнопкам и некоторым выборам. Скрипка здесь: http://jsfiddle.net/pVBU8/1/


получить все входы:

var allInputs = $(":input"); 

получить весь тип входа:

allInputs.attr('type'); 

получить значение:

allInputs.val(); 

ПРИМЕЧАНИЯ: .val() НЕ ТОЛЬКО as: проверяется для тех типов, где это релевантно. использование:

.attr("checked"); 

EDIT 1 февраля 2013 - Re: JQuery 1.9 использование реквизита() не атр(), как ATTR не будет возвращать правильные значения свойств, которые изменились.

.prop('checked'); 

или просто

$(this).checked; 

, чтобы получить значение проверки - независимо от того, что в настоящее время. или просто используйте «: checked», если хотите только те, которые были проверены.

EDIT: Вот еще один способ получить тип:

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

EDIT2: Обратите внимание, что форма:

$('input:radio'); 

является perferred над

$(':radio'); 

которые оба приравнивают до:

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

но «вход» желательно поэтому он получает только входы и не использует универсальный «*», когда форма $(':radio') используется, который приравнивает к $('*:radio');

EDIT 19 авг 2015: предпочтение $('input[type=radio]'); следует использовать как то, что позволяет современным браузерам оптимизировать поиск радиоввода.


EDIT 1 февраля 2013 на комментарий Re: выбрать элементы @dariomac

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

будет возвращать либо "выбрать-один" или "выбрать-кратное" в зависимости от "множественного" атрибута и

$('select')[0].type 

возвращает то же самое для первого выбора, если он существует. и

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

будет возвращать тип, если он существует, или "howdy", если это не так.

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

возвращает свойство первого в DOM, если оно существует или «неопределено», если его нет.

$('select').type 

возвращает тип первого, если он существует, или ошибка, если ее нет.

+0

Я пробовал это: var type = $ (": input [name =" + name + "]"). Attr ('type'); и он сработал! Спасибо. – Luci

+1

А как насчет «выпадающего меню» или выбора ввода ...? потому что это не тег ввода ... У меня такая же проблема сейчас, но я думаю использовать свойство типа dom ... – dariomac

+2

@dariomac - см. мои изменения и ссылки на jQuery 1.9+ –

11

Вы можете сделать следующее:

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

это означает, что я должен дать каждому радио/проверить один и тот же идентификатор? – Luci

+4

@zeina - * Никогда * не давайте элементам одинакового идентификатора. – user113716

+0

@ patrick- Я знаю, что идентификаторы должны быть уникальными, но почему они предлагают получить тип ввода по id, и у меня могут быть радиоприемники и флажок, в которых я буду зависеть от их имен ?! – Luci

8
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(); 
}; 
+0

+1 для этого. – Chris22

4

Лучшее место, чтобы начать смотреть это http://api.jquery.com/category/selectors/

Это даст вам хороший набор примеров.

Абсолютно выбор элементов в DOM достигается с помощью селекторов CSS, поэтому, если вы думаете о получении элемента по id, вы захотите использовать $ ('# elementId'), если вы хотите, чтобы все входные теги использовали $ ('input') и окончательно часть, которую я думаю, вам нужно, если вы хотите, чтобы все теги ввода с типом флажка использовали $ ('input, [type = checkbox])

Примечание: вы найдете большую часть значения, которые вы хотите, находятся на атрибутах, поэтому селектор CSS для атрибутов: [ATTRIBUTENAME = значение]

Просто потому, что вы просили выпадающее меню, как aposed к ListBox попробовать следующее:


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

код был из памяти, поэтому, пожалуйста, accound для небольших ошибок

+0

Что такое «[размер]» здесь? – Stranger

+0

@Udhayakumar '[size]' будет фильтровать результаты, чтобы включать только элементы с атрибутом размера, поэтому будут выбраны только списки, а не выпадающие списки. – Robert

+0

список коробок -> Вы имеете в виду текстовые поля? – Stranger

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

Комментарии:

  1. Я полагаю, что именно один элемент формы, который может быть либо текстовое поле, поле ввода, выберите форму, набор радиокнопок или один (вам нужно будет обновить мой код, если вам нужно больше флажков).

  2. Этот элемент находится внутри элемента с идентификатором container (для устранения неоднозначностей с другими элементами на странице).

  3. Код затем вернет значение сначала соответствующий ему элемент. Поскольку я использую :checked и т. Д., Это всегда должно быть именно то, что вы ищете.

9

Если то, что вы говорите, что вы хотите, чтобы получить все входы внутри формы, которые имеют значение, не беспокоясь о типе ввода, попробуйте следующее:

Пример: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(); 
1

Казалось бы, что функциональность атр становится далее осуждается

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

В моем приложении я получил два разных элемента, имеющих одинаковый идентификатор (плохой). Одним из элементов был div, а другой - вход. Я пытался подвести итоги и взял время на осознание дубликатов идентификаторов. Размещая тип элемента я хотел перед #, я был в состоянии захватить значение входного элемента и отбросить DIV:

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

Я надеюсь, что это помогает.

Смежные вопросы