如何使用jQuery获取单选框input的data-value属性值？

嘿，我一眼就瞅出问题所在啦！你在each循环里拿到的element是原生DOM元素，不是jQuery包装后的对象，所以直接调用element.attr()肯定会报错——原生DOM元素根本没有这个方法呀！

下面给你两种靠谱的解决方案，还有个小细节要纠正：

1. 把DOM元素转为jQuery对象调用方法 #

用$(element)把原生元素包装成jQuery对象，之后就可以用.attr()或者更推荐的.data()方法（.data()会自动解析data属性的类型，比如你的data-value="25"会直接返回数字25，而不是字符串）：

$('#some-form').find(':input').each(function (i, element) {
  console.log(element.value);
  // 推荐用data方法获取数据属性
  console.log($(element).data('value'));
  // 也可以用attr方法
  // console.log($(element).attr('data-value'));
});

2. 直接用原生DOM API获取data属性 #

如果你不想用jQuery包装，也可以用原生的方法：

• element.getAttribute('data-value')：兼容性拉满，返回字符串类型
• element.dataset.value：HTML5新增的API，写法更简洁，同样返回字符串

$('#some-form').find(':input').each(function (i, element) {
  console.log(element.value);
  // 原生getAttribute方法
  console.log(element.getAttribute('data-value'));
  // 或者用dataset
  // console.log(element.dataset.value);
});

额外小纠正：用find代替filter #

你原来的代码里用了$('#some-form').filter(':input')，这其实不对哦！filter是用来筛选当前匹配的元素（也就是#some-form这个表单元素本身），而我们要找的是表单内部的input元素，所以应该用find(':input')来查找子元素~

内容的提问来源于stack exchange，提问作者godot