使用 getElementsByName 获取选中的单选按钮值？ [复制]

Question

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

我意识到我的代码非常抗 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)

但由于某种原因它返回 undefined

我的 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

一个可能的解决方案：

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

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.getElementsByName('rooms') 时，您将获得一个NodeList，它是所有单选按钮的数组。所以在这个数组上使用.checked 不会返回任何东西。

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

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 4

嘿，你可以这样做， var ele = document.getElementsByName('rooms');

        for(i = 0; i < ele.length; i++) { 
            if(ele[i].checked) 
            document.getElementById("result").innerHTML = ele[i].value; 
        } 

Answer 5

检查：

let x = [ ...document.getElementsByName('rooms')].filter(item => item.checked)[0]; 

let x = [ ...document.getElementsByName('rooms')].filter(item => item.checked)[0]; 

var filters = {rooms: x.value};

function setRoom(e){
  filters.room = e.value;
  x = e;
  console.log("selected value: ", filters.room)
  console.log("selected element: ", x)

}

<input type="radio" id="rooms-all" class='radio' name="rooms" value="999999999"  onchange="setRoom(this)" checked>
<label for="rooms-all">All</label>

<input type="radio" id="room-1" class='radio' name="rooms" value="1" onchange="setRoom(this)">
<label for="room-1">1 Room</label>

<input type="radio" id="room-2" class='radio' name="rooms" value="2" onchange="setRoom(this)">
<label for="room-2">2 Rooms</label>

<input type="radio" id="room-3" class='radio' name="rooms" value="3" onchange="setRoom(this)">
<label for="room-3">3 Rooms</label>

<input type="radio" id="room-4" class='radio' name="rooms" value="4" onchange="setRoom(this)">
<label for="room-4">4 Rooms</label>

<input type="radio" id="room-5" class='radio' name="rooms" value="5" onchange="setRoom(this)">
<label for="room-5">5 Rooms</label>

Answer 6

最简单的解决方案是：

let value =  document.querySelector('input[name="rooms"]:checked').value;

谢谢大家的回答！

Answer 7

尝试将此添加到您的 Js 文件中

    $(document).on("click", ".radio", function(event)
  {
            $(this).prop("checked", true); 
             var value = $(this).val( );
            alert(value);
        });