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

我有一个页面，其中的输入类型总是不同的，我需要得到的值取决于输入类型。所以如果类型是单选框，我需要选中哪个，如果是复选框，我现在需要选中哪个，如果是下拉菜单，我需要知道哪个被选中，如果是文本/文本区域，我需要知道值。

知道怎么做吗？

459635 次浏览
小开

你可以这样做:

var inputType = $('#inputid').attr('type');
小开 
$("#yourobj").attr('type');
小开 
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();
};
小开

最好的开始寻找的地方是 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳 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();
});

代码来自内存，所以请解释小错误

小开
最佳答案

编辑: 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日-重新编辑: jQuery 1.9使用 prom ()而不是 attr () ，因为 attr 不会为已更改的属性返回正确的值。

.prop('checked');

或者干脆

$(this).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-multi”，具体取决于“ multi”属性和

$('select')[0].type

如果第一个 select 存在，则返回相同的值

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

如果类型存在，则返回该类型; 如果类型不存在，则返回“ Howdy”。

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

返回 DOM 中第一个属性(如果存在)或者“未定义”(如果不存在)。

$('select').type

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

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

评论:

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

  2. 有问题的元素位于 ID 为 container的元素中(用于消除页面上其他元素的歧义)。

  3. 然后，代码将返回它找到的与 第一匹配的元素的值。因为我使用 :checked等等，所以这应该总是正好是您所寻找的值。

小开

如果你想在一个有值的表单中获取所有的输入，而不用担心输入类型，试试下面的方法:

示例: < a href = “ http://jsfiddle.net/nfLfa/”rel = “ norefrer”> 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();
小开

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

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

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

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

希望能有所帮助。

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

我喜欢莱特式的

小开

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

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

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

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

检查选定的元素是 Radio 类型

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

检查所选元素是否为“复选框”类型

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

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

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

检查所选元素的类型是否为 Input 类型 password

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

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

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

.....

...

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


提交答案