如何使用jQuery获取输入类型?


147

我有一个页面,其中输入类型总是变化的,我需要获取取决于输入类型的值。因此,如果类型是单选,我需要获取选中的内容,如果是复选框,则现在需要选中的内容,如果是下拉列表,则需要知道选择了哪个,是否需要一个文本/文本区域,我需要知道值。

关于如何做到这一点的任何想法?


2
伙计们,您都取决于输入的ID,但是如果使用单选或复选框,我应该使用相同的ID吗?知道ID必须是唯一的。
Luci)2010年

Answers:


270

EDIT,2013年2月1日。由于此答案的普及以及1.9(和2.0版)中有关属性和属性的jQuery更改,我添加了一些注释和小提琴,以查看访问输入中的属性/属性时它如何工作,按钮和一些选择。这里的小提琴:http : //jsfiddle.net/pVBU8/1/


获取所有输入:

var allInputs = $(":input");

获取所有输入类型:

allInputs.attr('type');

得到值:

allInputs.val();

注意:.val()与:check不同,它们是相关的。用:

.attr("checked");

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

.prop('checked');

或简单地

$(this).checked;

获取支票的价值-无论当前是什么。或者如果只希望那些已被检查的代码,则只需使用':checked'。

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

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

EDIT2:请注意以下形式:

$('input:radio');

被认为

$(':radio');

两者都等于:

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

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

编辑:2015年8月19日:$('input[type=radio]');应优先使用,因为这样现代浏览器就可以优化搜索广播输入。


编辑2013年2月1日,每条评论重新:选择元素@dariomac

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

将根据“ multiple”属性返回“ select-one”或“ select-multiple”,并且

$('select')[0].type 

如果存在,则为第一个选择返回相同的内容。和

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

如果存在则返回类型,否则返回“ howdy”。

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

如果存在,则返回DOM中第一个属性的属性;如果不存在,则返回“ undefined”。

$('select').type

返回第一个的类型(如果存在)或错误(如果不存在)。


我试过了:var type = $(“:input [name =” + name +“]”)。attr('type'); 而且有效!谢谢。
Luci)2010年

2
那“下拉列表”或选择输入呢?因为那不是输入标签...我现在有同样的问题,但是我正在考虑使用dom属性类型...
dariomac

allInputs.attr('type');只会获得第一个元素的输入类型,即。allInputs[0].attr('type');如果集合中有多个元素。这同样适用于allInputs.val();如果你想要做的类型或每个元素的有价值的东西,你必须做这样的事情allInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
andyface

截至该日期,小提琴的大声笑已经过了自己的生活,共进行了82次修订。jsfiddle.net/pVBU8/82
Mark Schultheiss

15

您可以执行以下操作:

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

这是否意味着我必须给每个电台/检查相同的ID?
Luci)2010年

6
@zeina- 切勿给元素相同的ID。
user113716

@ patrick-我知道id必须是唯一的,但是为什么他们建议按id获取输入类型,我可能有收音机和复选框,我将在其中取决于它们的名称吗?
Luci)2010年

1
不,您不能给他们相同的ID,那是无效的。您可以使用:input jQuery选择器
Mark Schultheiss 2010年

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

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


4

最好的开始看的地方是 http://api.jquery.com/category/selectors/

这将为您提供许多示例。

最终,使用CSS选择器实现了DOM中元素的选择,因此,如果您考虑通过id获取元素,则希望使用$('#elementId'),如果希望所有输入标签都使用$('input')最后,我想如果要所有具有复选框类型的输入标签都使用$('input,[type = checkbox])

注意:您会在属性上找到所需的大多数值,因此属性的css选择器为:[attributeName = value]

只是因为您要求提供一个下拉列表框,请尝试以下操作:


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

该代码是从内存中提取的,因此请避免出现小错误


这里的“ [大小]”指的是什么?
陌生人

@Udhayakumar,“ [size]”将过滤结果以仅包括具有size属性的选择元素,因此将仅选择列表框,而不选择下拉列表。
罗伯特

列表框->您是说文本框吗?
陌生人

1
@Udhayakumar,不是我的意思是列表框,请单击此链接[ jsfiddle.net/565961fj ],以查看下拉列表框和列表框之间的区别。
罗伯特

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

注释:

  1. 我假设,只有一个表单元素,可以是文本区域,输入字段,选择表单,一组单选按钮或单个复选框(如果需要更多复选框,则必须更新我的代码)。

  2. 有问题的元素位于具有ID的元素内部container(以消除与页面上其他元素的歧义)。

  3. 然后,代码将返回找到的第一个匹配元素的值。由于我使用:checked等等,因此这应该始终是您要查找的内容的确切值。


3

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

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

0

在我的应用程序中,我最终得到了两个具有相同ID(错误)的不同元素。一个元素是div,另一个元素是输入。我试图总结自己的输入,花了我一段时间来实现重复的ID。通过将所需元素的类型放在#之前,我可以获取输入元素的值并丢弃div:

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

希望对您有所帮助。


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

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

我得到莱特表格类型

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.