web-dev-qa-db-fra.com

JQuery: Comment obtenir la valeur du bouton radio sélectionné?

Comment définir par défaut la valeur d'un bouton radio non sélectionné sur 0?

J'ai le code HTML suivant:

<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

Et j'ai le code suivant pour obtenir la valeur du bouton radio sélectionné

var radio_button_value $('input[name=myradiobutton]:radio').click(function() {var value = $(this).val();});

Le problème est, je veux par défaut la valeur de radio_button_value à 0 dans l'événement rien est sélectionné. Comment je fais ça?

Je veux fondamentalement faire le pseduo-code ci-dessous (mais cela ne fonctionne pas)

var radio_button_value $('input[name=myradiobutton]:radio').click(function() { 
if set
  return $(this).val();
else
  return 0;
});

MISE À JOUR

Il semble y avoir une confusion sur ce que je demande.

Ce que je veux faire lorsque la page est chargée (avant même qu'un utilisateur ait pu sélectionner un bouton radio), je souhaite une fonction qui renvoie 0 pour la valeur du bouton radio.

Ensuite, une fois qu'un utilisateur a sélectionné un bouton radio, cette fonction SAME renvoie la valeur sélectionnée du bouton radio.

Avoir un sens?

javascriptjqueryjquery-selectors
43
StaceyH

$('input[name=myradiobutton]:radio:checked') vous obtiendra le bouton radio sélectionné $('input[name=myradiobutton]:radio:not(:checked)') vous obtiendra les boutons radio non sélectionnés

En utilisant cela, vous pouvez le faire

$('input[name=myradiobutton]:radio:not(:checked)').val("0");

Mise à jour: Après avoir lu votre mise à jour, je pense avoir compris. Vous voudrez faire quelque chose comme ceci.

var myRadioValue;

function radioValue(jqRadioButton){
  if (jqRadioButton.length) {
    myRadioValue = jqRadioButton.val();
  }
  else {
    myRadioValue = 0;
  }
}

$(document).ready(function () {
  $('input[name=myradiobutton]:radio').click(function () {   //Hook the click event for selected elements
    radioValue($('input[name=myradiobutton]:radio:checked'));
  });

  radioValue($('input[name=myradiobutton]:radio:checked')); //check for value on page load
});
91
John Hartsock

Utilisez le sélecteur : coché pour déterminer si une valeur est sélectionnée:

function getRadioValue () {
    if( $('input[name=myradiobutton]:radio:checked').length > 0 ) {
        return $('input[name=myradiobutton]:radio:checked').val();
    }
    else {
        return 0;
    }
}

Mise à jour Vous pouvez appeler la fonction ci-dessus à tout moment pour obtenir la valeur sélectionnée des boutons radio. Vous pouvez y accéder au chargement, puis à chaque fois que la valeur change avec les événements suivants:

$(document).ready( function() {
    // Value when you load the page for the first time
    // Will return 0 the first time it's called
    var radio_button_value = getRadioValue();

    $('input[name=myradiobutton]:radio').click( function() {
        // Will get the newly selected value
        radio_button_value = getRadioValue();
    });
}
18
Dexter

Il commencera dès le chargement de la page. Vous pouvez le garder sous certains événements tels que le clic sur un bouton

$("#btn").click(function() { 
var val= $('input[type="radio"]:checked').val();
});
9
Ashish Babu
jQuery("input:radio[name=myradiobutton]:checked").val();
6
Muhammad Adnan

Je sais que c'est une vieille question mais je trouve que les réponses ne suffisent pas

La façon la plus propre de le faire est d'utiliser ce code

$(".myRadio").click(function() {
alert($(this).val());   
});

:-)

Vos données de saisie de formulaire doivent ressembler à ceci

<input type="radio" value="40000" name="pay"  class="myRadio" />
<label for="40000">40000</label>
3
mindmyweb

La meilleure méthode (en particulier si vous souhaitez pouvoir publier une valeur par défaut) serait probablement d’avoir un bouton radio masqué qui commence comme sélectionné et a votre valeur par défaut. Donc, quelque chose comme ça:

<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />
<input type="radio" name="myradiobutton" value="1" />1
<input type="radio" name="myradiobutton" value="2" />2
<input type="radio" name="myradiobutton" value="3" />3

Si vous ne pouvez pas modifier directement votre code HTML, vous pouvez l'ajouter via un script:

$(function() {
    $('input[name=myradiobutton]:radio:first').before('<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />');
});

En voici une démo: http://jsfiddle.net/Ender/LwPCv/

3
Ender

Cette méthode Jquery renvoie la valeur par défaut 0 lorsque la page est chargée ...

$('input[type="radio"]:checked').val();
3
arunsignit

Pour obtenir la valeur du bouton radio sélectionné, utilisez RadioButtonName et l'ID de formulaire contenant le RadioButton.

$('input[name=radioName]:checked', '#myForm').val()

OU par seulement

$('form input[type=radio]:checked').val();
3
Nadir

Ce travail pour moi espère que cela aidera: pour obtenir la valeur sélectionnée pour la radio, vous devez utiliser le nom du rapport comme sélecteur comme celui-ci.

selectedVal = $('input[name="radio_name"]:checked').val();

selectedVal aura la valeur requise, changez le nom de radio en fonction de la vôtre, dans votre cas, il serait "myradiobutton"

selectedVal = $('input[name="myradiobutton"]:checked').val();
2
saqibahmad

Vous devriez vraiment utiliser les cases à cocher s'il y a un cas où quelque chose n'est pas sélectionné.

selon le W3C

Si aucun bouton radio dans un ensemble partageant le même nom de contrôle n'est initialement "activé", le comportement de l'agent utilisateur pour choisir quel contrôle est initialement "activé" n'est pas défini. Remarque. Puisque les implémentations existantes traitent ce cas différemment, la spécification actuelle diffère de la RFC 1866 (section [RFC1866] 8.1.2.4), qui stipule:

A tout moment, l'un des boutons radio d'un ensemble est coché. Si aucun des éléments d'un ensemble de boutons radio ne spécifie "CHECKED", l'agent d'utilisateur doit d'abord vérifier le premier bouton radio de l'ensemble.

Le comportement de l'agent utilisateur étant différent, les auteurs doivent s'assurer que, dans chaque ensemble de boutons radio, celui-ci est initialement "activé".

2
Gregg B