是否使用getElementsByName获取选中的单选按钮值？[副本]

Question

我的房地产网站（例如1房间2房间3房间）有多个具有相同名称属性的单选按钮用于过滤。

我意识到我的代码非常反DRY，而且看起来非常重复。

我试过：

if (document.getElementById('rooms-all').checked) {
    filters.rooms = 999999999;
} else if (document.getElementById('room-1').checked) {
    filters.rooms = 1;
} else if (document.getElementById('room-2').checked) {
    filters.rooms = 2;
} else if (document.getElementById('room-3').checked) {
    filters.rooms = 3;
} else if (document.getElementById('room-4').checked) {
    filters.rooms = 4;
} else if (document.getElementById('room-5').checked) {
    filters.rooms = 5;
}

这非常有效，但我想做一些类似的事情：

let x = document.getElementsByName('rooms').checked; // also tried .value
console.log(x)

但由于某些原因，它返回未定义的值

我的HTML看起来像

<input type="radio" id="rooms-all" class='radio' name="rooms" value="999999999" checked>
<label for="rooms-all">All</label>
<input type="radio" id="room-1" class='radio' name="rooms" value="1">
<label for="room-1">1 Room</label>
<input type="radio" id="room-2" class='radio' name="rooms" value="2">
<label for="room-2">2 Rooms</label>
<input type="radio" id="room-3" class='radio' name="rooms" value="3">
<label for="room-3">3 Rooms</label>
<input type="radio" id="room-4" class='radio' name="rooms" value="4">
<label for="room-4">4 Rooms</label>
<input type="radio" id="room-5" class='radio' name="rooms" value="5">
<label for="room-5">5 Rooms</label>

我现在看到的是，我根本没有使用我给他们的值。

更好的方法是什么？

Answer 1

使用时，文档。getElementsByName（'rooms'）您将得到一个节点列表，它是所有单选按钮的数组。所以使用。选中此数组上的，则不会返回任何内容。

因此，您可以这样使用它：

let x = document.getElementsByName('rooms')
 x.forEach((item, index) => {
    if (item.checked){
        filters.rooms = item.value
    }
 })

或者，您可以将其包装在一个函数中，并在所有单选按钮上添加一个事件监听器，如下所示：

var x = document.getElementsByName('rooms')
var handler = function() {

     x.forEach((item, index) => {
        if (item.checked){
            filters.rooms = item.value
        }
     })
}

x.forEach((item) => { item.onclick = handler})

Answer 2

getElementsByName返回一个节点列表对象，因此，您可以像执行数组检查一样对其进行迭代，如下所示：

   let x = document.getElementsByName('rooms'); 
    for (var i = 0; i < x.length; i++) {
        var checked = x[i].checked;
        console.log(checked)
    }

Answer 3

一种可能的解决办法：

[...document.querySelectorAll('[id^="room"]')]
    .filter(input => input.checked).map(input => Number(input.value))[0];