890

Intento marcar un botón de radio con jQuery. Aquí está mi código:

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

Y el JavaScript:

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

No funciona

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

No funciona

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

No funciona

¿Tienes otra idea? ¿Qué me estoy perdiendo?

— Alexis
fuente

1

Gracias por sus respuestas! Encontré el problema. En realidad, las dos primeras formas de hacerlo están funcionando. El punto es que usé jqueryUI para transformar un conjunto de 3 botones de radio en un conjunto de botones con este código: jQuery ("# type"). Buttonset (); pero hacer este cambio antes de verificar la radio estaba rompiendo el aparato de radio (no sé por qué). Finalmente, puse la llamada del conjunto de botones después de revisar la radio y funciona impecablemente.

— Alexis

Use $ ("input: radio [value = '2']"). Prop ('marcado', verdadero); enlace aquí freakyjolly.com/…

— Code Spy

1469

Para versiones de jQuery iguales o superiores (> =) 1.6, use:

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

Para versiones anteriores a (<) 1.6, use:

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

Consejo: También puede llamar click()o llamar change()al botón de radio después. Ver comentarios para más información.

— Mike Thomsen
fuente

80

En jQuery 1.9 o superior, esta solución no funcionará. Use $ ("# radio_1"). Prop ("marcado", verdadero); en lugar.

— installero

12

@Installero en realidad, prepes correcto desde 1.6 y requerido desde 1.9.

— John Dvorak

43

Es útil agregar .change()al final para activar cualquier otro evento en la página.

— Foxinni

13

Puede ser conveniente reorganizar esta respuesta para que .propsea claramente la respuesta correcta y el .attrmétodo sea una nota para jQuery <1.6.

— Patrick

22

Si desea que los otros botones de radio del grupo de radio se actualicen correctamente, use$("#radio_1").prop("checked", true).trigger("click");

— Paul LeBeau

256

Prueba esto.

En este ejemplo, lo estoy apuntando con su nombre y valor de entrada

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

Es bueno saberlo: en caso de valor de varias palabras, también funcionará debido a los apóstrofes.

— Vladimir Djuricic
fuente

55

Esta es probablemente la mejor manera, los otros tienden a quedarse allí, lo que hace que la función sea inútil la segunda vez, mientras que funciona como se esperaba

— Roy Toledo

Descubrí que dado que solo hay uno que se puede seleccionar, $ ('input [name = "type"]: check'). Val () también es bueno.

— huggie

Por favor elabora. La idea general es marcar un botón de radio que lo aborde con sus atributos: nombre y, opcionalmente, valor. No estoy seguro de qué está tratando de lograr con esto, ya que solo se utilizan el atributo de nombre y: el pseudo selector seleccionado. Y también está recuperando val, lo cual es bastante confuso. Gracias

— Vladimir Djuricic

2

Estaba a punto de agregar un "id" a todas mis radios, pero este método funcionó a la perfección. Pero tenga en cuenta que cuando su valor sea de varias palabras (por ejemplo, "color púrpura"), deberá incluir citas apropiadas: $("input[name=background][value='color purple']").prop("checked",true);

— Tristan Tao

3

¡Mucho mejor que la respuesta seleccionada! Exactamente lo que estaba buscando. Esto es genérico, mientras que la respuesta seleccionada es específica. Genial gracias.

— GarbageGigo

96

Una función más prop () que se agrega en jQuery 1.6, que sirve para el mismo propósito.

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

— Umesh Patil
fuente

13

la attr('checked', true)dejó de funcionar para mí con jQuery 1.9, esta es la solución!

— Pascal

1

parece que prop("checked", true)está funcionando, attr('checked', 'checked')no

— Tomasz Kuter

@TomaszKuter Recomiendo usar prop () porque la propiedad DOM marcada es la que debería afectar el comportamiento, pero es extraño, en este violín ( jsfiddle.net/KRXeV ) attr('checked', 'checked')realmente funciona x)

— jave.web

aquí hay una buena desambiguación stackoverflow.com/questions/5874652/prop-vs-attr

— code_monk

81

Opción corta y fácil de leer:

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

Devuelve verdadero o falso, por lo que puede usarlo en la declaración "if".

— Karbaman
fuente

55

¡Gracias! Esto es lo que estaba buscando, pero (FYI) el OP preguntaba cómo CONFIGURAR el botón de radio, no obtener el valor. (La palabra "cheque" hizo la pregunta confusa.)

— Bampfer

31

Prueba esto.

Para marcar el botón de radio usando Value, use esto.

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

Para marcar el botón de radio usando la ID, use esto.

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

O

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

— Lakshmana Kumar
fuente

14

Prueba esto:

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

http://jsfiddle.net/nwo706xw/

— usuario4457035
fuente

Es importante que .val(['1'])no.val('1')

— Bob Stein

13

El $.propcamino es mejor:

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

y puedes probarlo de la siguiente manera:

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

9

Tu tienes que hacer

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

Ese es el atributo HTML

— JohnP
fuente

7

Si la propiedad nameno funciona, no olvide que idtodavía existe. Esta respuesta es para las personas que quieren apuntar idaquí como lo haces.

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

Porque la propiedad nameno me funciona. Asegúrate de no rodear idyname con comillas dobles / simples.

¡Salud!

— Anjana Silva
fuente

7

Sí, funcionó para mí de una manera:

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

— Anjan Kant
fuente

6

Prueba esto

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

6

Sorprendentemente, la respuesta más popular y aceptada ignora la activación del evento apropiado a pesar de los comentarios. Asegúrese de invocar .change() , de lo contrario, todos los enlaces "en cambio" ignorarán este evento.

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

— apatsekin
fuente

5

$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

— Eray
fuente

5

Obtenga valor:

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

Valor ajustado:

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

Botón de radio, haga clic en Agregar atributo marcado:

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

— Naim Serin
fuente

5

Deberíamos querer decir que es un radiobotón, así que intente con el siguiente código

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

— UWU_SANDUN
fuente

5

En caso de que alguien esté tratando de lograr esto mientras usa jQuery UI, también deberá actualizar el objeto de casilla de verificación UI para reflejar el valor actualizado:

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

— Freeworlder
fuente

4

Yo uso este código:

Perdón por el inglés.

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>

Expandir fragmento

— volitilov
fuente

4

Prueba esto con el ejemplo

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

3

Prueba esto

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

— user2190046
fuente

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
fuente

2

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

— dominicbri7
fuente

2

$("#radio_1").attr('checked', true);Esto no funcionará. Según lo mencionado por el OP

— JohnP

2

Explique el código en sus respuestas y lea la pregunta (esto se ha intentado)

— SomeKittens

2

Obtuve algunos ejemplos relacionados para mejorar, ¿qué tal si quiero agregar una nueva condición, digamos, si quiero que se oculte la combinación de colores después de hacer clic en el valor de Estado del proyecto, excepto Pavimentadoras y Losas de pavimento?

El ejemplo está aquí:

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

2

Además, puede verificar si el elemento está marcado o no:

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

Puede verificar el elemento sin marcar:

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

También puede desmarcar de esta manera:

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

Puede verificar el botón de radio:

Para versiones de jQuery iguales o superiores (> =) 1.6, use:

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

Para versiones anteriores a (<) 1.6, use:

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

— Majedur Rahaman
fuente

2

Solía jquery-1.11.3.js

Habilitar y deshabilitar básico

Consejos 1: (Tipo de botón de radio común Deshabilitar y habilitar)

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

Consejos 2: (selector de ID con prop () o 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);

Consejos 3: (selector de clase con prop () o arrt ())

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

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

OTROS CONSEJOS

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

2

Utilice prop () mehtod

Enlace fuente

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

1

prueba esto

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

si está marcado devuelve True si no está marcado devuelveFalse

jQuery v1.10.1

— pst
fuente

1

Algunas veces las soluciones anteriores no funcionan, puede probar a continuación:

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

Otra forma de probar es:

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

— Pankaj Bhagwat
fuente

1

Uniform es un complemento de jQuery que hace que los formularios sean más bonitos, pero lo hace agregando elementos adicionales. Cada vez que actualizo el valor verificado, el estado del elemento adicional no se actualiza, lo que lleva a una entrada invisible que no se verifica, pero con un elemento de fondo visible que parece verificado. jQuery.uniform.update()es la solucion!

— Denilson Sá Maia

1

Prueba esto:

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

— usuario3721473
fuente

Esto no funcionará sin incluir el archivo para el checkboxradiocomplemento, lo cual no tiene sentido cuando solo puede usar las funciones integradas de jQuery para lograr esto (vea la respuesta aceptada).

— Nathan

1

Acabo de tener un problema similar, una solución simple es simplemente usar:

.click()

Cualquier otra solución funcionará si actualiza la radio después de llamar a la función.

— usuario3148673
fuente

1

el clic de llamada a veces es un dolor de cabeza en ie9

— Astolfo Hoscher

1

attr acepta dos cadenas.

La forma correcta es:

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

— Koko Monsef
fuente

¿Cómo verificar un botón de radio con jQuery?

Yo uso este código: