In jQuery, how do I get the value of a radio button when they all have the same name?

Question

Here is my code:

<table>    <tr>       <td>Sales Promotion</td>       <td><input type="radio" name="q12_3" value="1">1</td>       <td><input type="radio" name="q12_3" value="2">2</td>       <td><input type="radio" name="q12_3" value="3">3</td>       <td><input type="radio" name="q12_3" value="4">4</td>       <td><input type="radio" name="q12_3" value="5">5</td>    </tr> </table> <button id="submit">submit</button> 

Here is JS:

$(function(){     $("#submit").click(function(){               alert($('input[name=q12_3]').val());     });  }); 

Here is JSFIDDLE! Every time I click button it returns 1. Why? Can anyone help me?

Answer 1

In your code, jQuery just looks for the first instance of an input with name q12_3, which in this case has a value of 1. You want an input with name q12_3 that is :checked.

$("#submit").click(() => {    const val = $('input[name=q12_3]:checked').val();    alert(val);  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <table>    <tr>      <td>Sales Promotion</td>      <td><input type="radio" name="q12_3" value="1">1</td>      <td><input type="radio" name="q12_3" value="2">2</td>      <td><input type="radio" name="q12_3" value="3">3</td>      <td><input type="radio" name="q12_3" value="4">4</td>      <td><input type="radio" name="q12_3" value="5">5</td>    </tr>  </table>  <button id="submit">submit</button>

Note that the above code is not the same as using .is(":checked"). jQuery's is() function returns a boolean (true or false) and not (an) element(s).

---

Because this answer keeps getting a lot of attention, I'll also include a vanilla JavaScript snippet.

document.querySelector("#submit").addEventListener("click", () => {    const val = document.querySelector("input[name=q12_3]:checked").value;    alert(val);  });

<table>    <tr>      <td>Sales Promotion</td>      <td><input type="radio" name="q12_3" value="1">1</td>      <td><input type="radio" name="q12_3" value="2">2</td>      <td><input type="radio" name="q12_3" value="3">3</td>      <td><input type="radio" name="q12_3" value="4">4</td>      <td><input type="radio" name="q12_3" value="5">5</td>    </tr>  </table>  <button id="submit">submit</button>

Answer 2

in your selector, you should also specify that you want the checked radiobutton:

$(function(){     $("#submit").click(function(){               alert($('input[name=q12_3]:checked').val());     });  });