web-dev-qa-db-fra.com

Comment vérifier un bouton radio avec jQuery?

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?

javascriptjqueryformsradio-button
782
Alexis

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');

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

1324
Mike Thomsen

Essaye ça.

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

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

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

216
Vladimir Djuricic

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

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

Option courte et facile à lire:

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

Il renvoie true ou false, vous pouvez donc l'utiliser dans la déclaration "if".

75
Karbaman

Essaye ça.

Pour vérifier le bouton radio à l’aide deValeur, 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 deID, utilisez ceci.

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

Ou

$('#radio_1').prop('checked','checked');
28
Lakshmana Kumar

La méthode $.prop 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();
    });        
});
12
Amin Saqi

Essaye ça:

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

http://jsfiddle.net/nwo706xw/

9
user4457035

Tu dois faire 

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

C'est l'attribut HTML

8
JohnP

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

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

Si la propriété name ne fonctionne pas, n'oubliez pas que id existe toujours. Cette réponse s’adresse aux personnes qui souhaitent cibler la id ici.

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

Parce que la propriété name ne fonctionne pas pour moi. Assurez-vous de ne pas entourer id et name de citations doubles/simples.

À votre santé!

5
Anjana Silva

Nous devrions vouloir dire que c’est un bouton radio.Veuillez essayer avec le code suivant.

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

Juste au cas où quelqu'un essaierait d'y parvenir en utilisant l'interface utilisateur de jQuery, vous devrez également actualiser l'objet de case à cocher de l'interface utilisateur pour refléter la valeur mise à jour:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
4
freeworlder
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
4
Eray

Essaye ça

var isChecked = $("#radio_1")[0].checked;
3
user2190046

Essayez ceci avec 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>
3
saroj

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 sélectionné

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

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
        }
    });
});
2
Jordan Jelinek

J'ai quelques exemples connexes à améliorer, que diriez-vous si je veux ajouter une nouvelle condition, disons, si je veux que le jeu de couleurs soit masqué après que je clique sur la valeur d'état du projet, à l'exception des Pavés et Pavés.

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/

2
azim hamdan

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>

2
volitilov 
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

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

$(function() {  
    $("#citiEmail").prop("checked", true)
});
1
MadhaviLatha Bathini

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

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

Une autre façon d'essayer est:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
1
Pankaj Bhagwat

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.

1
user3148673

essaye ça 

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

si coché renvoie True si non coché renvoie False

jQuery v1.10.1
1
pst

J'ai utilisé jquery-1.11.3.js

Activer et désactiver basique

Astuces 1: (type de bouton radio commun désactiver et activer)

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

Astuces 2: (sélecteur d’ID avec 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);

Astuces 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>
0
venkatSkpi

Si vous ne souhaitez pas inclure une grande bibliothèque comme jQuery pour quelque chose d'aussi simple, voici une solution alternative utilisant des méthodes DOM intégrées:

// Check checkbox by id:
document.querySelector('#radio_1').checked = true;

// Check checkbox by value:
document.querySelector('#type > [value="1"]').checked = true;

// If this is the only input with a value of 1 on the page, you can leave out the #type >
document.querySelector('[value="1"]').checked = true;
<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>
0
CertainPerformance

En outre, vous pouvez vérifier si l'élément est coché ou non: 

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

Vous pouvez cocher l'élément non coché: 

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

Vous pouvez aussi décocher cette case: 

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

Vous pouvez cocher 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');
0
Majedur Rahaman

attr accepte deux chaînes.

La manière correcte est:

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

Essaye ça:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
0
user3721473
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
0
dominicbri7

Étonnamment, la réponse la plus populaire et la plus acceptée ne prend pas en compte le déclenchement d'un événement approprié malgré les commentaires. Assurez-vous d'appeler .change(), sinon toutes les liaisons "à la modification" ignoreront cet événement.

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

attr accepte deux chaînes.

La manière correcte est:

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