Comment vérifier un bouton radio avec jQuery?

890

J'essaie de vérifier un bouton radio avec jQuery. Voici mon code:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

Et le JavaScript:

jQuery("#radio_1").attr('checked', true);

Ne fonctionne pas:

jQuery("input[value='1']").attr('checked', true);

Ne fonctionne pas:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Ne fonctionne pas:

Avez-vous une autre idée? Qu'est-ce que je rate?

Alexis
la source
1
Merci pour vos réponses! J'ai trouvé le problème. En fait, les deux premières façons de le faire fonctionnent. Le fait est que j'ai utilisé jqueryUI pour transformer un ensemble de 3 boutons radio en un ensemble de boutons avec ce code: jQuery ("# ​​type"). Buttonset (); mais faire ce changement avant de vérifier la radio cassait le poste radio (je ne sais pas pourquoi). Enfin, j'ai mis l'appel du jeu de boutons après avoir vérifié la radio et cela fonctionne impeccablement.
Alexis
Utilisez $ ("input: radio [value = '2']"). Prop ('checked', true); lien ici freakyjolly.com/…
Code Spy

Réponses:

1469

Pour les versions de jQuery égales ou supérieures (> =) 1.6, utilisez:

$("#radio_1").prop("checked", true);

Pour les versions antérieures à (<) 1.6, utilisez:

$("#radio_1").attr('checked', 'checked');

Astuce: Vous pouvez également appeler par la suite click()ou change()sur le bouton radio. Voir les commentaires pour plus d'informations.

Mike Thomsen
la source
80
Dans jQuery 1.9 ou supérieur, cette solution ne fonctionnera pas. Utilisez $ ("# radio_1"). Prop ("vérifié", true); au lieu.
installero
12
@Installero est en prepfait correct depuis 1.6 et requis depuis 1.9.
John Dvorak
43
Il est utile d'ajouter .change()à la fin pour déclencher tout autre événement sur la page.
Foxinni
13
Il pourrait être judicieux de réorganiser cette réponse afin que ce .propsoit clairement la bonne réponse et que la .attrméthode soit une note pour jQuery <1.6.
Patrick
22
Si vous souhaitez que les autres boutons radio du groupe radio soient correctement mis à jour, utilisez$("#radio_1").prop("checked", true).trigger("click");
Paul LeBeau
256

Essaye ça.

Dans cet exemple, je le cible avec son nom et sa valeur d'entrée

$("input[name=background][value='some value']").prop("checked",true);

Bon à savoir: en cas de valeur multi-mots, cela fonctionnera aussi à cause des apostrophes.

Vladimir Djuricic
la source
5
C'est probablement le meilleur moyen, les autres ont tendance à rester là rendant la fonction inutile la deuxième fois alors que cela fonctionne comme prévu
Roy Toledo
J'ai découvert que puisqu'il n'y en a qu'un seul qui peut être sélectionné, $ ('input [name = "type"]: vérifié'). Val () est également bien.
huggie
Veuillez élaborer. L'idée générale est de cocher un bouton radio lui adressant ses attributs - nom et éventuellement valeur. Je ne sais pas ce que vous essayez d'accomplir avec cela, car il n'y a que l'attribut de nom et: le pseudo-sélecteur vérifié utilisé. Et vous récupérez également val, ce qui est assez déroutant. Merci
Vladimir Djuricic
2
J'étais sur le point d'aller ajouter un "id" à toutes mes radios, mais cette méthode fonctionnait parfaitement. Mais gardez à l'esprit que lorsque votre valeur est composée de plusieurs mots (par exemple, "couleur pourpre"), vous devrez inclure les citations appropriées: $("input[name=background][value='color purple']").prop("checked",true);
Tristan Tao
3
Bien mieux que la réponse choisie! Exactement ce que je cherchais. C'est générique, tandis que la réponse sélectionnée est spécifique. Super merci.
GarbageGigo
96

Une autre fonction prop () ajoutée dans jQuery 1.6, qui sert le même objectif.

$("#radio_1").prop("checked", true); 
Umesh Patil
la source
13
le attr('checked', true)cessé de fonctionner pour moi avec jQuery 1.9, c'est la solution!
Pascal
1
semble que cela prop("checked", true)fonctionne, attr('checked', 'checked')ne fonctionne pas
Tomasz Kuter
@TomaszKuter Je recommande d'utiliser prop () car la propriété DOM vérifiée est celle qui devrait affecter le comportement - mais c'est étrange - dans ce violon ( jsfiddle.net/KRXeV ) attr('checked', 'checked')fonctionne réellement x)
jave.web
voici une bonne désambiguïsation stackoverflow.com/questions/5874652/prop-vs-attr
code_monk
81

Option courte et facile à lire:

$("#radio_1").is(":checked")

Il renvoie vrai ou faux, vous pouvez donc l'utiliser dans l'instruction "if".

Karbaman
la source
5
Merci! C'est ce que je cherchais, mais (pour info) l'OP demandait comment régler le bouton radio, pas obtenir la valeur. (Le mot «vérifier» a rendu la question déroutante.)
Bampfer
31

Essaye ça.

Pour vérifier le bouton Radio à l'aide de Value, utilisez ceci.

$('input[name=type][value=2]').attr('checked', true); 

Ou

$('input[name=type][value=2]').attr('checked', 'checked');

Ou

$('input[name=type][value=2]').prop('checked', 'checked');

Pour vérifier le bouton radio à l'aide de l' ID, utilisez ceci.

$('#radio_1').attr('checked','checked');

Ou

$('#radio_1').prop('checked','checked');
Lakshmana Kumar
la source
14

Essaye ça:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

user4457035
la source
Surtout .val(['1'])pas.val('1')
Bob Stein
13

La $.propvoie est meilleure:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

et vous pouvez le tester comme suit:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});
Amin Saqi
la source
9

Tu dois faire

jQuery("#radio_1").attr('checked', 'checked');

C'est l'attribut HTML

JohnP
la source
7

Si la propriété namene fonctionne pas, n'oubliez pas idqu'elle existe toujours. Cette réponse s'adresse aux personnes qui souhaitent cibler la idfaçon dont vous procédez ici.

$('input[id=element_id][value=element_value]').prop("checked",true);

Parce que la propriété namene fonctionne pas pour moi. Assurez-vous de ne pas entourer idetname avec des citations doubles / simples.

À votre santé!

Anjana Silva
la source
7

Oui, cela a fonctionné pour moi comme un moyen:

$("#radio_1").attr('checked', 'checked');
Anjan Kant
la source
6

Essaye ça

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});
Jordan Jelinek
la source
6

Étonnamment, la réponse la plus populaire et acceptée ignore le déclenchement d'un événement approprié malgré les commentaires. Assurez-vous que vous appelez .change() , sinon toutes les liaisons "on change" ignoreront cet événement.

$("#radio_1").prop("checked", true).change();
apatsekin
la source
5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
Eray
la source
5

Obtenez de la valeur:

$("[name='type'][checked]").attr("value");

Définir la valeur:

$(this).attr({"checked":true}).prop({"checked":true});

Bouton radio Cliquez sur ajouter attr vérifié:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});
Naim Serin
la source
5

Nous devons dire que c'est un radiobouton. Essayez donc avec le code suivant.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);
UWU_SANDUN
la source
5

Juste au cas où quelqu'un essaierait de réaliser cela en utilisant jQuery UI, vous devrez également actualiser l'objet de case à cocher UI pour refléter la valeur mise à jour:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
freeworlder
la source
4

J'utilise ce code:

Je suis désolé pour l'anglais.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

volitilov
la source
4

Essayez ceci avec un exemple

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
saroj
la source
3

Essaye ça

var isChecked = $("#radio_1")[0].checked;
user2190046
la source
3
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});
MadhaviLatha Bathini
la source
2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
dominicbri7
la source
2
$("#radio_1").attr('checked', true);cela ne fonctionnera pas. Tel que mentionné par le PO
JohnP
2
Veuillez expliquer le code dans vos réponses et lire la question (cela a été essayé)
SomeKittens
2

J'ai obtenu un exemple connexe à améliorer, que diriez-vous si je veux ajouter une nouvelle condition, disons, si je veux que le schéma de couleurs soit masqué après avoir cliqué sur la valeur d'état du projet, sauf Pavers et Paving Slabs.

L'exemple est ici:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/

azim hamdan
la source
2

De plus, vous pouvez vérifier si l'élément est vérifié ou non:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

Vous pouvez vérifier l'élément non coché:

$('.myCheckbox').attr('checked',true) //Standards way

Vous pouvez également décocher de cette façon:

$('.myCheckbox').removeAttr('checked')

Vous pouvez vérifier le bouton radio:

Pour les versions de jQuery égales ou supérieures (> =) 1.6, utilisez:

$("#radio_1").prop("checked", true);

Pour les versions antérieures à (<) 1.6, utilisez:

$("#radio_1").attr('checked', 'checked');
Majedur Rahaman
la source
2

J'ai utilisé jquery-1.11.3.js

Activation et désactivation de base

Conseils 1: (Type de bouton radio commun Désactiver et Activer)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

Conseils 2: (Sélecteur d'ID utilisant prop () ou attr ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Conseils 3: (Sélecteur de classe utilisant prop () ou arrt ())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

AUTRES CONSEILS

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>
venkatskpi
la source
2

Utiliser le mehtod prop ()

entrez la description de l'image ici

Lien source

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>
Code Spy
la source
1

essaye ça

 $("input:checked", "#radioButton").val()

si coché retourne True si non coché retourneFalse

jQuery v1.10.1
TVP
la source
1

Certaines fois, les solutions ci-dessus ne fonctionnent pas, vous pouvez essayer ci-dessous:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Vous pouvez également essayer:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
Pankaj Bhagwat
la source
1
Uniform est un plugin jQuery qui rend les formulaires plus jolis, mais il le fait en ajoutant des éléments supplémentaires. Chaque fois que je mets à jour la valeur vérifiée, l'état de l'élément supplémentaire n'est pas mis à jour, ce qui conduit à une entrée invisible qui n'est pas vérifiée, mais avec un élément d'arrière-plan visible qui semble vérifié. jQuery.uniform.update()est la solution!
Denilson Sá Maia
1

Essaye ça:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
user3721473
la source
Cela ne fonctionnera pas sans inclure le fichier du checkboxradioplugin, ce qui est inutile lorsque vous pouvez simplement utiliser les fonctions intégrées de jQuery pour accomplir cela (voir la réponse acceptée).
Nathan
1

Je viens d'avoir un problème similaire, une solution simple consiste à simplement utiliser:

.click()

Toute autre solution fonctionnera si vous actualisez la radio après avoir appelé la fonction.

user3148673
la source
1
le clic d'appel est parfois un casse-tête dans ie9
Astolfo Hoscher
1

attr accepte deux chaînes.

La bonne façon est:

jQuery("#radio_1").attr('checked', 'true');
Koko Monsef
la source