it-swarm.it

Come controllare un pulsante di opzione con jQuery?

Provo a controllare un pulsante di opzione con jQuery. Ecco il mio codice:

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

E il JavaScript: 

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

Non funziona:

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

Non funziona:

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

Non funziona:

Hai un'altra idea? Cosa mi manca?

782
Alexis

Per le versioni di jQuery uguale o superiore (> =) 1.6, utilizzare:

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

Per le versioni precedenti a (<) 1.6, utilizzare:

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

Suggerimento: È inoltre possibile chiamare click() o change() sul pulsante di opzione in seguito. Vedi i commenti per maggiori informazioni.

1324
Mike Thomsen

Prova questo.

In questo esempio, lo sto prendendo di mira con il suo nome e valore di input

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

Buono a sapersi: in caso di valore multi-Word, funzionerà anche a causa degli apostrofi.

216

Un'altra funzione prop () che viene aggiunta in jQuery 1.6, che ha lo stesso scopo.

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

Opzione breve e facile da leggere:

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

Restituisce vero o falso, quindi puoi usarlo nell'istruzione "if".

75
Karbaman

Prova questo.

Per controllare il pulsante Radio usandoValueusa questo.

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

O

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

O

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

Per controllare il pulsante Radio usandoIDusa questo.

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

O

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

Il modo $.prop è migliore:

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

e puoi testarlo come il seguente:

$(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

Prova questo:

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

http://jsfiddle.net/nwo706xw/

9
user4457035

Devi fare 

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

Questo è l'attributo HTML

8
JohnP

Sì, ha funzionato per me come un modo:

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

Se la proprietà name non funziona, non dimenticare che id esiste ancora. Questa risposta è per le persone che vogliono indirizzare il id qui come fai.

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

Perché la proprietà name non funziona per me. Assicurati di non circondare id e name con virgolette doppie/singole.

Saluti!

5
Anjana Silva

Dovremmo dire che è un pulsante radio. Per favore prova con il seguente codice.

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

Nel caso in cui qualcuno stia cercando di ottenere questo risultato utilizzando l'interfaccia utente di jQuery, sarà necessario anche aggiornare l'oggetto casella di controllo dell'interfaccia utente per riflettere il valore aggiornato:

$("#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

Prova questo

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

Prova questo con l'esempio

<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

Ottieni valore:

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

Valore impostato: 

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

Pulsante radio clicca aggiungi attr controllato:

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

Prova questo

$(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

Ho ottenuto qualche esempio correlato per essere migliorato, e se volessi aggiungere una nuova condizione, diciamo, se voglio che la combinazione di colori sia nascosta dopo aver fatto clic sul valore dello stato del progetto, ad eccezione delle finitrici e delle lastre.

Esempio è qui:

$(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

Io uso questo codice:

Mi dispiace per l'inglese.

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

Alcune volte sopra le soluzioni non funzionano, quindi puoi provare di seguito:

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

Un altro modo per provare è:

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

Ho appena avuto un problema simile, una soluzione semplice è usare semplicemente:

.click()

Qualsiasi altra soluzione funzionerà se si aggiorna la radio dopo aver chiamato la funzione.

1
user3148673

prova questo 

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

se selezionato restituisce True se non selezionato restituisce False

jQuery v1.10.1
1
pst

Nel caso in cui tu non voglia includere una grande libreria come jQuery per qualcosa di così semplice, ecco una soluzione alternativa che usa i metodi DOM incorporati:

// 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

Inoltre, è possibile verificare se l'elemento è selezionato o meno:

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

È possibile verificare l'elemento non controllato:

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

Puoi anche deselezionare in questo modo:

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

È possibile verificare il pulsante di opzione:

Per le versioni di jQuery uguale o superiore (> =) 1.6, utilizzare:

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

Per le versioni precedenti a (<) 1.6, utilizzare:

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

attr accetta due stringhe.

Il modo corretto è:

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

Prova questo:

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

Sorprendentemente, la risposta più popolare e accettata ignora l'attivazione di un evento appropriato nonostante i commenti. Assicurati di invocare .change(), altrimenti tutte le associazioni "on change" ignoreranno questo evento.

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

attr accetta due stringhe.

Il modo corretto è:

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