如何使用 jquery 获取输入类型？答案

【问题标题】：How to get input type using jquery?如何使用 jquery 获取输入类型？
【发布时间】：2011-03-11 01:46:54
【问题描述】：

我有一个输入类型总是变化的页面，我需要根据输入类型获取值。因此，如果类型是收音机，我需要检查哪个，如果它是一个复选框，我现在需要检查哪个，如果它是一个下拉列表，我需要知道哪个被选中，如果是我需要知道值的文本/文本区域。

你知道怎么做吗？

【问题讨论】：

伙计们，你们都依赖于输入的 id，但是在收音机或复选框的情况下，我应该有相同的 id 吗？知道 id 必须是唯一的。

【解决方案1】：

编辑 2013 年 2 月 1 日。由于此答案的流行以及 1.9 版（和 2.0 版）中关于属性和属性的 jQuery 更改，我添加了一些注释和小提琴以了解它在访问属性/属性时如何工作在输入、按钮和一些选择上。这里的小提琴：http://jsfiddle.net/pVBU8/1/

获取所有输入：

var allInputs = $(":input");

获取所有输入类型：

allInputs.attr('type');

获取值：

allInputs.val();

注意：.val() 与 :checked 不同的是那些相关的类型。使用：

.attr("checked");

编辑 2013 年 2 月 1 日 - 回复：jQuery 1.9 使用 prop() 而不是 attr()，因为 attr 不会为已更改的属性返回正确的值。

.prop('checked');

或者干脆

$(this).checked;

获取支票的价值——无论它当前是什么。或者如果你只想要那些被选中的，只需使用 ':checked'。

编辑：这是另一种获取类型的方法：

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

编辑2：注意形式：

$('input:radio');

优于

$(':radio');

两者都等同于：

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

但是“输入”是需要的，因此当使用$(':radio') 的形式时它只获取输入并且不使用通用“*”，这相当于$('*:radio');

2015 年 8 月 19 日编辑：应该使用 $('input[type=radio]'); 的偏好，因为这样可以让现代浏览器优化无线电输入的搜索。

编辑 2013 年 2 月 1 日每条评论回复：选择元素 @dariomac

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

将返回“select-one”或“select-multiple”，具体取决于“multiple”属性和

$('select')[0].type

如果存在，则为第一个选择返回相同的值。和

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

如果存在则返回类型，如果不存在则返回“howdy”。

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

如果存在则返回 DOM 中第一个属性的属性，如果不存在则返回“未定义”。

$('select').type

如果存在则返回第一个类型，如果不存在则返回错误。

【讨论】：

我试过这个： var type=$(":input[name="+name+"]").attr('type');它奏效了！谢谢。
那么“下拉”或选择输入...？因为那不是输入标签...我现在有同样的问题，但我正在考虑使用 type dom 属性...
allInputs.attr('type'); 只会获取第一个元素输入类型，即。 allInputs[0].attr('type'); 如果集合中有多个元素。 allInputs.val(); 也是如此，如果你想对每个元素的类型或值做一些事情，你必须做类似allInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
LOL 这把小提琴已经有了自己的生命，截至目前已进行了 82 次修订。 jsfiddle.net/pVBU8/82

【解决方案2】：

您可以执行以下操作：

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

【讨论】：

这是否意味着我必须给每个收音机/检查相同的id？
@zeina - 从不给元素相同的 ID。
@patrick- 我知道 id 必须是唯一的，但为什么他们建议通过 id 获取输入类型，而且我可能有收音机和复选框，我将在其中依赖他们的名字？！
不，您不能给他们相同的 ID，这是无效的。你可以使用 :input jQuery 选择器

【解决方案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();
});

代码来自记忆，小错误请多多包涵

【讨论】：

这里的“[size]”是什么意思？
@Udhayakumar '[size]' 将过滤结果以仅包含具有 size 属性的选择元素，因此只会选择列表框而不是下拉列表。
列表框 -> 你的意思是文本框吗？
@Udhayakumar，不是我的意思是列表框，点击这个链接 [jsfiddle.net/565961fj] 看看下拉和列表框的区别。

【解决方案7】：

似乎 attr 功能正在被进一步弃用

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

【讨论】：

【解决方案8】：

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

评论：

我假设确实有一个表单元素，可以是文本区域、输入字段、选择表单、一组单选按钮或单个复选框（您将拥有如果您需要更多复选框，请更新我的代码）。
有问题的元素位于 ID 为 container 的元素中（以消除与页面上其他元素的歧义）。
然后代码将返回它找到的 first 匹配元素的值。由于我使用:checked 等，这应该始终是您正在寻找的值。

【讨论】：

【解决方案9】：

在我的应用程序中，我最终得到了两个具有相同 id 的不同元素（坏）。一个元素是 div，另一个是输入。我试图总结我的输入并花了我一段时间来实现重复的 id。通过将我想要的元素的类型放在#前面，我能够获取输入元素的值并丢弃 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】：

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

我得到 wright 表单类型

【讨论】：

【解决方案12】：

使用 jQuery 非常简单... 检查所选元素是否为输入类型

$(".elementClass").is('input')

检查所选元素是否为 textarea 类型

$(".elementClass").is('textarea')

检查所选元素是否为 Radio 类型

$(".elementClass").is('input[type="radio"]')

检查所选元素是复选框的类型

$(".elementClass").is('input[type="checkbox"]')

检查所选元素的类型是否为输入类型编号

$(".elementClass").is('input[type="number"]')

检查所选元素的类型是否为输入类型密码

$(".elementClass").is('input[type="password"]')

检查所选元素的类型是否为输入类型电子邮件

$(".elementClass").is('input[type="email"]')

.....

...

所以基本上你可以改变选择和类型来确定所需的输入类型

【讨论】：