具有不同 ID、不同值、相同名称属性的单选按钮

Question

我的收音机选择器看起来像这样

<div id="graph_selector" style="display:none; text-align: center;" >
   <p><b>Tipo de Grafico: </b></p>
     <div class="cc-selector">
        <input id="axes" type="radio" name="sel_graph" class="radio_selector" value="axes" />
        <label class="drinkcard-cc axes"for="axes"></label>
        <input id="activity" type="radio" name="sel_graph" class="radio_selector" value="activity" />
        <label class="drinkcard-cc activity" for="activity"></label>
        <input id="pie" type="radio" name="sel_graph" class="radio_selector" value="pie" />
        <label class="drinkcard-cc pie" for="pie"></label>
     </div>
</div>

提交我的选择的按钮

<button type="submit" class="btn btn-success" id="guardar_grafico">Graficar</button>

我试图在我的 js 上获得正确的值，但是当我使用 console.log();我得到的只是第一个输入的值=“axes”，不管我选择什么

<script type="text/javascript">    
$('#guardar_grafico').click(function() {
       var graph_selector = document.querySelector('input[name=sel_graph]').value
       console.log(graph_selector);
});

如有任何帮助，我们将不胜感激

Answer 1

为了获取单选组中所选单选的值，您需要在每个单选上查找 checked 属性。

在此示例中，它循环遍历具有该 name="sel_graph" 属性的所有收音机，并将该列表过滤到选中的 1 个收音机。

var graph_selector = Array.from(
    document.querySelectorAll('input[name=sel_graph]')
).filter(radio => radio.checked)[0]?.value;
console.log(graph_selector);

此外，我刚刚发现您正在使用 jQuery。有一个更简单的解决方案，请查看此答案。

jQuery get value of selected radio button

Answer 2

nvm，解决了这个问题，我在我的 js

上遗漏了选中的属性

它来自这个

var graph_selector = document.querySelector('input[name=sel_graph]').value

至此

var graph_selector = document.querySelector('input[name=sel_graph]:checked').value

具有不同 ID、不同值、相同名称属性的单选按钮

Radio button with different ids, different values, same name attribute

javascript

php

radio-button