Question

我想知道是否有一行没有循环来读取HTML5中无线电输入的值。

在旧的HTML中：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

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();

所以我只想知道：

在没有Jquery的HTML5中更好的方法吗？
是否还有像Jquery这样的其他JS库可以采用相同的单行方法或更好的方法？

Answer 1

[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：
- Attribute-selectors。
JavaScript的：
- Array.prototype.map()。
- Array.prototype.slice()。
- document.querySelector()。
- document.querySelectorAll()。
- Function.prototype.call()。

Answer 2

没有使用jQuery有更好的方法吗？没有环和一个衬垫？无
还有另一个像jQuery这样的库可以更好地完成单行程吗？无

真正的问题是，为什么厌恶jQuery？ jQuery经过了很好的测试，并被社区所接受，以至于有无数的js库都是基于jQuery构建的。

Answer 3

原则上，您可以使用RadioNodeList属性part of HTML5。然而，根据MDN，它显然不受IE 8及更早版本的支持，移动浏览器的支持尚不清楚。

更准确地说，您从form元素开始，其中elements属性具有namedItem方法，当RadioNodeList方法的值为name时，它返回value个对象。 1}}属性作为参数给出。该对象具有<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>属性，该属性生成由名称标识的组中当前选中的单选按钮的值。

示例：

＆＃13;

{{1}}

＆＃13;

这是否比其他方法更好是一个意见问题，取决于背景和范围。关于替代图书馆的问题在SO上是偏离主题的。

使用javascript读取HTML5输入无线电标签

3 个答案: