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

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

Есть идеи, как это сделать?

РЕДАКТИРОВАТЬ 1 февраля 2013 г. Из-за популярности этого ответа и изменений в jQuery в версии 1.9 (и 2.0), касающихся свойств и атрибутов, я добавил несколько заметок и скрипку, чтобы увидеть, как это работает при доступе к свойствам / атрибутам при вводе, кнопки и некоторые выбирает. Скрипка здесь: http://jsfiddle.net/pVBU8/1/

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

var allInputs = $(":input");

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

allInputs.attr('type');

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

allInputs.val();

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

.attr("checked");

РЕДАКТИРОВАТЬ 1 февраля 2013 г. - re: jQuery 1.9 использует prop (), а не attr (), так как attr не будет возвращать правильные значения для свойств, которые изменились.

.prop('checked');

или просто

$(this).checked;

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

РЕДАКТИРОВАТЬ: Вот еще один способ получить тип:

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

РЕДАКТИРОВАТЬ 2: Обратите внимание, что форма:

$('input:radio');

отдается над

$(':radio');

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

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

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

РЕДАКТИРОВАТЬ 19 августа 2015 г .: предпочтение $('input[type=radio]');следует использовать, поскольку оно позволяет современным браузерам оптимизировать поиск радиовхода.

РЕДАКТИРОВАТЬ 1 февраля 2013 за комментарий re: выбрать элементы @dariomac

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

вернет либо «select-one», либо «select-множественный» в зависимости от атрибута «множественный» и

$('select')[0].type 

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

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

вернет тип, если он существует, или «привет», если его нет.

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

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

$('select').type

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="hs/jquery1.js"></script>
        <title>Document</title>
    </head>
    <body>
        <form>
            <input type="text" class="tamil">
            <input type="button" class="english">
        </form>
        <script>
            $("input").addClass(function(index){
                    console.log($(this).attr('type'));
            })
        </script>
    </body>
    </html>

я получаю тип формы Райта