CODEWITHSUNDEEP
javascriptjquery
SPG
SPG

Reputation: 6197

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

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?

Upvotes: 109

Views: 284779

Answers (7)

Bram Vanroy
Bram Vanroy

Reputation: 28437

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>

Upvotes: 229

Code Spy
Code Spy

Reputation: 9964

DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

$(function(){
    $("#submit").click(function(){      
        alert($('input:radio:checked').val());
    });
 });

Upvotes: 1

Ankush Khandekar
Ankush Khandekar

Reputation: 71

There is another way also. Try below code

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});

Upvotes: 7

Iyes boy
Iyes boy

Reputation: 305

$('input:radio[name=q12_3]:checked').val();

Upvotes: 2

Sohil Desai
Sohil Desai

Reputation: 2988

use this script

$('input[name=q12_3]').is(":checked");

Upvotes: -1

fantactuka
fantactuka

Reputation: 3334

You might want to change selector:

$('input[name=q12_3]:checked').val()

Upvotes: 7

Dennis
Dennis

Reputation: 14465

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

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

Upvotes: 16

Related Questions