当前位置：文江博客话题详情

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

发布于 2024-09-08 03:38:38 字数 150 浏览 5 评论 0原文

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

关于如何做到这一点有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对你而言 2024-09-15 03:38:38

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

获取所有输入：

var allInputs = $(":input");

get所有输入类型：

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]');

EDIT2：
以下形式：

$('input:radio');

请注意，首选

$(':radio');

两者都等于：

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

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

编辑 2015 年 8 月 19 日：偏好 $('input[type=radio]');< /code> 应该这样使用，然后允许现代浏览器优化无线电输入的搜索

编辑 2013 年 2 月 1 日每个评论 re: select elements。
@dariomac

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

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

$('select')[0].type

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

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

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

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

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

$('select').type

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

EDIT Feb 1, 2013. Due to the popularity of this answer and the changes to jQuery in version 1.9 (and 2.0) regarding properties and attributes, I added some notes and a fiddle to see how it works when accessing properties/attributes on input, buttons and some selects. The fiddle here: http://jsfiddle.net/pVBU8/1/

get all the inputs:

var allInputs = $(":input");

get all the inputs type:

allInputs.attr('type');

get the values:

allInputs.val();

NOTE: .val() is NOT the same as :checked for those types where that is relevent.
use:

.attr("checked");

EDIT Feb 1, 2013 - re: jQuery 1.9 use prop() not attr() as attr will not return proper values for properties that have changed.

.prop('checked');

or simply

$(this).checked;

to get the value of the check - whatever it is currently. or simply use the ':checked' if you want only those that ARE checked.

EDIT: Here is another way to get type:

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

EDIT2:
Note that the form of:

$('input:radio');

is perferred over

$(':radio');

which both equate to:

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

but the "input" is desired so it only gets the inputs and does not use the universal '*" when the form of $(':radio') is used which equates to $('*:radio');

EDIT Aug 19, 2015: preference for the $('input[type=radio]'); should be used as that then allows modern browsers to optimize the search for a radio input.

EDIT Feb 1, 2013 per comment re: select elements
@dariomac

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

will return either "select-one" or "select-multiple" depending upon the "multiple" attribute and

$('select')[0].type

returns the same for the first select if it exists. and

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

will return the type if it exists or "howdy" if it does not.

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

returns the property of the first one in the DOM if it exists or "undefined" if none exist.

$('select').type

returns the type of the first one if it exists or an error if none exist.

回复收藏 0 原文

护你周全 2024-09-15 03:38:38

您可以执行以下操作：

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

You could do the following:

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

回复收藏 0 原文

你是暖光i 2024-09-15 03:38:38

如果您的意思是您想要获取表单内具有值的所有输入而不用担心输入类型，请尝试以下操作：

示例： 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();

If what you're saying is that you want to get all inputs inside a form that have a value without worrying about the input type, try this:

Example: http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});

Now you should have a set of input elements that have some value.

You can put the values in an array:

var array = $inputs.map(function(){
    return this.value;
}).get();

Or you could serialize them:

var serialized = $inputs.serialize();

回复收藏 0 原文

忘年祭陌 2024-09-15 03:38:38

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

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

回复收藏 0 原文

一页 2024-09-15 03:38:38

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

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

回复收藏 0 原文

九歌凝 2024-09-15 03:38:38

开始查找的最佳位置是 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();
});

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

The best place to start looking is http://api.jquery.com/category/selectors/

This will give you a good set of examples.

Ultamatly the selecting of elements in the DOM is achived using CSS selectors so if you think about getting an element by id you will want to use $('#elementId'), if you want all the input tags use $('input') and finaly the part i think you'll want if you want all input tags with a type of checkbox use $('input, [type=checkbox])

Note: You'll find most of the values you want are on attributes so the css selector for attributes is: [attributeName=value]

Just because you asked for the dropdown as aposed to a listbox try the following:


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

The code was from memory so please accound for small errors

回复收藏 0 原文

静待花开 2024-09-15 03:38:38

看来 attr 功能正在进一步被弃用

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

It would seem that the attr functionality is getting further deprecated

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

回复收藏 0 原文

海未深 2024-09-15 03:38:38

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

评论：

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

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

Comments:

I assume, that there is exactly one form element, that can be either a textarea, input field, select form, a set of radio buttons or a single checkbox (you will have to update my code if you need more checkboxes).
The element in question lives inside an element with ID container (to remove ambiguences with other elements on the page).
The code will then return the value of the first matching element it finds. Since I use :checked and so on, this should always be exactly the value of what you're looking for.

回复收藏 0 原文

第几種人 2024-09-15 03:38:38

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

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

检查所选元素是否为文本区域类型检查

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

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

$(".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"]')

......

所以

基本上您可以更改选择和类型以确定所需的输入类型

Very Simple using jQuery...
To check that selected element is type of input

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

To check that selected element is type of textarea

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

To check that selected element is type of Radio

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

To check that selected element is type of Checkbox

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

To check that selected element is type of Input type number

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

To check that selected element is type of Input type password

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

To check that selected element is type of Input type email

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

.....

...

So Basically you can change selection and type to determine required input type

回复收藏 0 原文

愚人国度 2024-09-15 03:38:38

在我的应用程序中，我最终得到了两个具有相同 id 的不同元素（不好）。一个元素是 div，另一个元素是输入。我试图总结我的输入，并花了一段时间才意识到重复的 ID。
通过将我想要的元素的类型放在 # 前面，我能够获取输入元素的值并丢弃 div：

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

我希望它有所帮助。

In my application I ended up with two different elements having the same id (bad). One element was a div and the other an input. I was trying to sum up my inputs and took me a while to realise the duplicate ids.
By placing the type of the element I wanted in front of #, I was able to grab the value of the input element and discard the div:

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

I hope it helps.

回复收藏 0 原文

策马西风 2024-09-15 03:38:38

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

<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 原文

ゞ记忆︶ㄣ 2024-09-15 03:38:38

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

我得到了正确的表单类型

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