如何使用jquery从无线电输入中获取数据值？
[英]How to get data-value from radio input using jquery?
问题描述
我有简单的其中包括这样的输入：
<form id='some-form'>
....
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">
....
</form>
我正在尝试遍历此表单并获取数据值：
$('#some-form').filter(':input').each(function (i, element) {
console.log(element.value);
console.log(element.attr('data-value'));
}
element.value保持值 ' on ' 或 ' off ' 取决于是否选择了无线电并且它工作正常但是当我尝试调用element.attr('data-value')它会抛出一个错误。
那么如何在这个循环中提取数据值呢？
5 个解决方案
解决方案1
3 已采纳 2018-04-11 16:46:05
使用。患儿（）而不是.filter（） 。
前者将获取表单内的元素，后者将过滤$('#some-form')将提供的所有元素。
HIH
编辑
正如gaetanoM和connexo所指出的，使用element.attr()而没有您需要的$()也存在问题，因为.attr()是 jQuery 的一种方法，而不是 JS
$('#some-form').children(':input').each(function (i, element) { console.log(element.value); console.log($(element).attr('data-value')); // // or // // console.log(element.dataset.value); }) console.log('end');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='some-form'> <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68"> </form>
解决方案2
3 2018-04-11 16:46:40
在您的.each()函数element是一个常规的HTMLElement ，而不是一个 jQuery 对象。
要么使用$(element) （甚至$(this) ）包装它，它允许使用 jQuery 的$.attr()
$(element).attr('data-value')
或者，更好的是，使用相应的原生 DOM Api 方法
element.getAttribute('data-value'))
由于您正在访问data-属性，DOM Api 有一个特殊的对象dataset来访问这些（从 IE 11 开始）：
element.dataset.value
如果您的数据属性有一个名称，例如data-cmon-lets-go您可以使用data-cmon-lets-go法访问它：
element.dataset.cmonLetsGo
解决方案3
3 2018-04-11 17:07:41
如果你使用较新的jQuery >= 1.4.3你可以这样使用。
$(this).data("value");
或
$(this).data().value;
解决方案4
1 2018-04-11 16:49:56
这也可以用 vanilla javascript 来完成。
document.querySelectorAll('#some-form input[type="radio"]').forEach(radio => { console.log(radio.value, radio.dataset.value); });
<form id='some-form'> <input type="radio" data-type="4" data-value="25" data-id="68" name="req-68"> </form>
解决方案5
1 2018-04-11 16:55:19
在每个循环中，您实际上处于无线电元素的上下文中，因此您可以使用$(this).attr('data-value')并且它会起作用。 下面是一个工作代码。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id='some-form'>
<input type="radio" data-type="4" data-value="25" data-id="68" name="req-68">Hello
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#some-form :input').each(function (i, element) {
console.log(i);
console.log("element", element);
console.log($(this).val());
console.log($(this).attr('data-value'));
});
});
</script>
如何从所选按钮的输入类型=文件“更改”中检测数据值？
[英]How to detect data-value from input type=file “change” from the selected button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.