使用 javascript 读取 HTML5 输入单选标记

[JavaScript] 是这样的：

var sexes = document.getElementsByName('sex');
var sex_value;
for(var i = 0; i < sexes.length; i++){
    if(sexes[i].checked){
        sex_value = sexes[i].value;
    }
}

但是同样的事情可以在一行中使用Jquery来完成，例如

$('input[name="sex"]:checked').val();

在原生 DOM/JavaScript 中的一行中也可以完成相同的操作：

// using a CSS selector to retrieve a single DOM node,
// and retrieving its value property:
document.querySelector('input[name=sex]:checked').value;

或者，要获取所有元素，它们是否应该为复选框，例如：

// using a CSS selector to retrieve all matching elements
// as a (non-live) NodeList:
var all = document.querySelectorAll('input[name=favourites]:checked');

要检索所有这些复选框的值，请检索到一个数组中：

// retrieving the elements into a NodeList:
var all = document.querySelectorAll('input[name=favourites]:checked'),
    // using Array.prototype.slice() (with
    // Function.prototype.call()) to convert
    // the NodeList into an Array:
    allArray = Array.prototype.slice.call(all, 0),
    // using Array.prototype.map() to iterate over that
    // array to return another array containing only
    // the values of each of the array-elements:
    allValues = allArray.map(function (arrayElement) {
                    return arrayElement.value;
                });

如果你真的想，可以浓缩成几行(跳过对Array.prototype.slice()的调用(：

var allValues = Array.map.call(document.querySelectorAll('input[name=favourites]:checked', function (arrayElement) {
    return arrayElement.value;
});

引用：

• .CSS：
  • 属性选择器。
• JavaScript：
  • Array.prototype.map() .
  • Array.prototype.slice() .
  • document.querySelector() .
  • document.querySelectorAll() .
  • Function.prototype.call() .

1. 有没有更好的方法不使用jQuery？没有循环和一行？ 否
2. 有没有另一个像jQuery这样的库可以更好地完成单行代码？

真正的问题是，为什么对jQuery的厌恶？jQuery被社区很好地测试和接受，以至于有无数的js库建立在jQuery之上。

原则上，您可以使用 RadioNodeList 属性，它是 HTML5 的一部分。但是，IE 8 及更早版本显然不支持它，并且根据 MDN 的说法，移动浏览器中的支持是未知的。

更确切地说，您从 form 元素开始，其中 elements 属性具有一个 namedItem 方法，该方法在将 name 属性的值作为参数给出时返回一个RadioNodeList对象。该对象具有 value 属性，该属性生成由名称标识的组中当前选中的单选按钮的值。

例：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<button type=button onclick=show()>Show sex</button>
</form>
<script>
function show() {
  alert(document.forms[0].elements.namedItem('sex').value)
}
</script>

这是否比其他方法更好是一个意见问题，取决于上下文和范围。关于备用库的问题在 SO 是题外话。