Как получить тип ввода с помощью jquery?

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

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

Ответ 1

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


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

var allInputs = $(":input");

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

allInputs.attr('type');

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

allInputs.val();

ПРИМЕЧАНИЕ..val() не совпадает с: проверяется для тех типов, где это релевантно. Применение:

.attr("checked");

EDIT 1 февраля 2013 г. - re: jQuery 1.9 использует prop() not attr(), поскольку attr не возвращает правильные значения для измененных свойств.

.prop('checked');

или просто

$(this).checked;

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

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

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

EDIT2: Заметим, что форма:

$('input:radio');

передается через

$(':radio');

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

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

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

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


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

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

вернет либо "select-one", либо "select-multiple" в зависимости от атрибута "multiple" и

$('select')[0].type 

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

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

вернет тип, если он существует, или "howdy", если он этого не делает.

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

возвращает свойство первого в DOM, если оно существует, или "undefined", если его не существует.

$('select').type

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

Лучшее место для поиска - http://api.jquery.com/category/selectors/

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

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

Примечание. Большинство значений вы найдете в атрибутах, поэтому селектор css для атрибутов: [attributeName = value]

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


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

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

Ответ 7

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

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

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

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

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

Ответ 8

Казалось бы, что функция attr становится еще более устаревшей

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

Ответ 9

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

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

Надеюсь, это поможет.

Ответ 10

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $(".show-pwd").click(function(){
          alert();
            var x = $("#myInput");
            if (x[0].type === "password") {
              x[0].type = "text";
            } else {
              x[0].type = "password";
            }
          });
        });
    </script>
</head>

<body>
    <p>Click the radio button to toggle between password visibility:</p>Password:
    <input type="password" value="FakePSW" id="myInput">
    <br>
    <br>
    <input type="checkbox" class="show-pwd">Show Password</body>

</html>

Ответ 11

Вы можете использовать следующий код, чтобы проверить, является ли тип ввода текстовым

 if ($(this).attr('type') === "text") {
     //do something...
 }