使用javascript讀取HTML5輸入無線標記

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

所以，我只是想知道：

1. 在沒有Jquery的情況下，使用HTML5做一個更好的方法是什麼？
2. 是否有任何其他JS庫，如JQuery，可以做同樣的單行方法或更好？

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

1. 有沒有使用jQuery更好的辦法？沒有圈和一個班輪？沒有
2. 是否有另外一個類似jQuery的庫，可以做更好的單線程？沒有

真正的問題是那麼，爲什麼厭惡jQuery？ jQuery經過了很好的測試並被社區所接受，以至於有無數的js庫是由jQuery構建的。

Answer 3

原則上，您可以使用RadioNodeList屬性，即part of 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上關於替代圖書館的問題是無關緊要的。