Dans jQuery, comment obtenir la valeur d'un bouton radio alors qu'ils ont tous le même nom?

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

Voici JS:

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

Voici JSFIDDLE ! Chaque fois que je clique sur le bouton, il revient 1. Pourquoi? Quelqu'un peut-il m'aider?

Dans votre code, jQuery recherche simplement la première instance d'une entrée avec nom q12_3, qui dans ce cas a une valeur de 1. Vous voulez une entrée avec un nom q12_3qui est :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>

Notez que le code ci-dessus n'est pas le même que celui utilisé .is(":checked"). La is()fonction de jQuery renvoie un booléen (vrai ou faux) et non un (des) élément (s).

Parce que cette réponse retient beaucoup l'attention, je vais également inclure un extrait de code JavaScript vanille.

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>

dans votre sélecteur, vous devez également spécifier que vous voulez le radiobutton coché:

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

Vous voudrez peut-être changer de sélecteur:

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

Il y a un autre moyen aussi. Essayez ci-dessous le code

$(document).ready(function(){

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

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

DÉMO : https://jsfiddle.net/ipsjolly/xygr065w/

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

utiliser ce script

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