logo标签列表

如何使用jquery从单选框输入中获取数据值？

javascriptjqueryhtml
4
我是一名有用的助手，可以翻译文本。
我有一个简单的表格，其中包含像这样的输入：
<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')时，它会抛出一个错误。

那么在这个循环中如何提取data-value？

你遇到了什么错误？也许这不是一个jQuery的element，在这种情况下尝试使用element.getAttribute('data-value')。 - connexo
由于它是一个数据元素，您甚至不需要使用getAttribute方法。您可以直接使用元素的数据集。 - Taplar
IE10 及以下版本只允许使用 HTMLElement.prototype.getAttribute() 访问。https://caniuse.com/#search=dataset - connexo
5个回答
3
在你的.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，您可以使用驼峰式符号访问它：
element.dataset.cmonLetsGo
3

如果您使用的是新版本的 jQuery >= 1.4.3 您可以这样使用。

$(this).data("value");

或者

$(this).data().value;
3

使用.children()代替.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>

你没有命名问题。 - connexo
这个答案没有详细阐述那个问题。 - connexo
@connexo，实际上问题不在于 $(element)，正如答案开头所述，问题出在使用了 .filter() 而非 .children()。$(element) 部分只是额外的修复，我之所以注意到它，仅仅是因为它从一开始就给我抛出了一个如此巨大的错误，我很惊讶它还在那里。 - Scaramouche
@gaetanoM，在编辑之前请阅读我的先前评论。 - Scaramouche
element.value 保存了值'on'或'off'，取决于单选按钮是否被选中，并且它可以正常工作，但是当我尝试调用 element.attr('data-value') 时，它会抛出一个错误 对于 OP 来说，使用 element.value 是可以工作的，只有 element.attr() 给他报错了。 - connexo
显示剩余3条评论
1
在每个循环中，实际上您处于单选按钮元素的上下文中，因此可以使用$(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>
1
这也可以使用原生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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接