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

Posted 2023-03-05

【中文标题】使用 getElementsByName 获取选中的单选按钮值？ [复制]

【英文标题】：Get the checked radio button value with getElementsByName? [duplicate]

【发布时间】：2020-02-24 16:03:09

【问题描述】：

我的房地产网站有多个具有相同名称属性的单选按钮（例如 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>

而我目前看到的我根本没有使用我给他们的值。

有什么更好的方法？

【问题讨论】：

“某些原因”是 getElementsByName 返回一个节点列表，您现在正在检查该节点列表是否设置了 checked 属性，当然它没有。使用此方法，您仍然需要遍历列表，并查看是否为其中的任何元素单独设置了属性。

在提到的重复项***.com/a/47391907/10955263 中检查类似的答案，以便更快地获取组中选中的单选按钮的值。

【参考方案1】：

一个可能的解决方案：

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

【参考方案2】：

getElementsByName 返回一个节点列表对象，因此您可以像执行数组一样遍历它以进行检查：

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

【讨论】：

尽管技术上可行，但绝对没有必要遍历数组来获取单选按钮的值。如果我是你，我会删除这个答案，因为它没有用。

我同意这不是最好的检查方式，想回答他为什么返回未定义的问题。

getElementsByName() 返回一个“活动节点列表”，它是一个“类数组”对象，但不是真正的数组。

for (var el of document.getElementsByName('rooms'))

【参考方案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)

【参考方案4】：

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

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

【参考方案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>

【参考方案6】：

最简单的解决方案是：

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

谢谢大家的回答！

【参考方案7】：

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

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

【讨论】：

你知道JQuery和javascript的区别吗？

是的，我知道。 Jquery 是 javascript 库。 Javascript 是面向对象的语言。