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

问题描述 投票:128回答:10

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

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

jquery input types
10个回答
234
投票

编辑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

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


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>

14
投票

您可以执行以下操作:

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

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
投票
$("#yourobj").attr('type');

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

代码来自内存,所以请考虑一些小错误


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

评论:

  1. 我假设,只有一个表单元素,可以是textarea,输入字段,选择表单,一组单选按钮或单个复选框(如果需要更多复选框,则必须更新我的代码)。
  2. 有问题的元素位于ID为container的元素内(用于删除页面上其他元素的ambiguences)。
  3. 然后代码将返回它找到的第一个匹配元素的值。因为我使用:checked等,所以这应该总是正是你所寻找的价值。

3
投票

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

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

0
投票

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

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

我希望它有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.