En jQuery, comment puis-je obtenir la valeur d'un bouton radio lorsqu'ils ont tous le même nom ?

Question

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 renvoie 1. Pourquoi ? Quelqu'un peut-il m'aider ?

Answer 1

Dans votre code, jQuery cherche juste la première instance d'une entrée avec le nom q12_3 qui, dans ce cas, a une valeur de 1 . Vous voulez une entrée avec le nom q12_3 c'est-à-dire :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 est no c'est la même chose que d'utiliser .is(":checked") . la méthode de jQuery is() renvoie un booléen (vrai ou faux) et pas (un) élément(s).

---

Comme cette réponse suscite beaucoup d'attention, je vais également inclure un extrait JavaScript de type 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>

Answer 2

Dans votre sélecteur, vous devez également préciser que vous voulez le bouton radio coché :

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

Answer 3

Vous pourriez vouloir changer de sélecteur :

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

Answer 4

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

$(document).ready(function(){

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

Answer 5

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