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

Question

I got my radio Selector that looks like this

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

A button to submit my selection

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

Im trying to get the right value on my js but when I use console.log(); all I get is the value from the 1st input= "axes" regardless of what I choose

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

Any help would be appreciated

Answer 1

nvm, solved the issue, I was missing the checked property on my js

it went from this

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

to this

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