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

时间:2010-07-02 11:56:05

标签: jquery input types

我有一个输入类型总是变化的页面,我需要根据输入类型获取值。因此,如果类型是收音机,我需要检查哪个,如果它是我现在需要检查的复选框,如果是下拉菜单,我需要知道哪个被选中,如果它是text / textarea我需要知道这些值。

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

13 个答案:

答案 0 :(得分:236)

编辑2013年2月1日。由于这个答案的流行以及版本1.9(和2.0)中关于属性和属性的jQuery的变化,我添加了一些注释和小提琴,看看它在访问属性/属性时是如何工作的在输入,按钮和一些选择。这里的小提琴:http://jsfiddle.net/pVBU8/1/


获取所有输入:

var allInputs = $(":input");

获取所有输入类型:

allInputs.attr('type');

获取值:

allInputs.val();

注意:.val()与以下内容不同:检查那些相关的类型。 使用方法:

.attr("checked");

编辑2013年2月1日 - re: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日评论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

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

答案 1 :(得分:14)

您可以执行以下操作:

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

答案 2 :(得分: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();

答案 3 :(得分: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 :(得分:4)

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

答案 5 :(得分:4)

开始寻找的最佳位置是 http://api.jquery.com/category/selectors/

这将为您提供一组很好的例子。

最好使用CSS选择器来选择DOM中的元素,所以如果你想通过id获取元素,你会想要使用$('#elementId'),如果你想要所有的输入标签都使用$('如果你想要所有带有复选框类型的输入标签都使用$('input,[type = checkbox])

,那么我认为你想要的部分最后输入')

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

只是因为您要求将下拉列表设置为列表框,请尝试以下操作:


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

代码来自内存,因此请注意小错误

答案 6 :(得分:3)

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

评论:

  1. 我假设,确实存在一个表单元素,可以是textarea,输入字段,select表单,一组单选按钮或单个复选框(您将拥有如果您需要更多复选框,请更新我的代码。)

  2. 相关元素位于ID为container的元素内(用于删除页面上其他元素的歧义)。

  3. 然后代码将返回它找到的第一个匹配元素的值。由于我使用:checked等等,这应该始终正是您所寻找的价值。

答案 7 :(得分:3)

似乎attr功能进一步被弃用

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

答案 8 :(得分:0)

在我的应用程序中,我最终得到了两个具有相同id(坏)的不同元素。一个元素是div,另一个元素是输入。我试图总结我的输入,并花了一些时间来实现重复的ID。 通过在#前面放置我想要的元素的类型,我能够获取输入元素的值并丢弃div:

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

我希望它有所帮助。

答案 9 :(得分: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>

我得到莱特表格类型

答案 10 :(得分:0)

使用 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"]')

.....

...

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

答案 11 :(得分:-1)

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

答案 12 :(得分:-2)

您可以使用以下代码检查输入的类型是否为文本

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