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

javascript, jquery

Solution

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>

Problem

Original source