2011-03-11 21 views
27

Estoy tratando de verificar la radio. Ni las siguientes obras:.attr ('checked', 'checked') no funciona

[editar]

$('selector').attr('checked','checked'); 
$('selector').attr('checked',true); 

Los dos alerta() en el siguiente programa de código "1" y "A", respectivamente. Mi expectativa es la segunda alerta() que muestra "b".

Opera comprueba la segunda casilla de radio en su navegador, pero su elemento inspector, libélula, muestra que el DOM no se ha modificado.

[final editar]

había leído el FAQ antes de que he publicado esta pregunta:

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_check.2Funcheck_a_checkbox_input_or_radio_button.3F

Ayuda será muy apreciada!

TIA

La página XHTML y el código de la siguiente manera:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Weird Behavior</title> 
<script type="text/javascript" src="scripts/jquery.js"/> 
<script type="text/javascript"> 
function clickme(){ 
    alert($('input[name="myname"][value="b"]').length); 
    $('input[name="myname"][value="b"]').attr('checked','checked'); 
    $('#b').attr('checked',true); 
    alert($('input[name="myname"][checked]').val()); 
}; 
</script> 
</head> 
<body> 
    <form action=""> 
     <fieldset> 
      <legend>Why check is not switched?</legend> 
      <input type="radio" name="myname" value="a" id="a" checked="checked"/>A 
      <input type="radio" name="myname" value="b" id="b"/>B 
     </fieldset> 
    </form> 
    <p> 
    <button type="button" onclick="clickme()">click me</button> 
    </p> 
</body> 
</html> 
+0

¿Cómo se ha comprobado la fuente DOM generado? – Sander

+2

'$ ('algún selector de elemento'). Attr ('checked', 'checked');' –

+0

@experimentX: Eso es lo que está en el código fuente de muestra, ¿no? – BoltClock

Respuesta

13

Con jQuery, nunca use en línea onclick javascript. Mantenlo discreto. Haga esto en su lugar, y elimine completamente el onclick.

Además, tenga en cuenta el uso del pseudo selector :checked en la última línea. La razón de esto es porque una vez que se carga la página, el html y el estado real del elemento del formulario pueden ser diferentes. Abra un inspector web y puede hacer clic en el otro botón de radio y el HTML seguirá mostrando que el primero está marcado. El selector :checked en su lugar filtra los elementos que están realmente marcados, independientemente de cómo comenzó el html.

$('button').click(function() { 
    alert($('input[name="myname"][value="b"]').length); 
    $('input[name="myname"][value="b"]').attr('checked','checked'); 
    $('#b').attr('checked',true); 
    alert($('input[name="myname"]:checked').val()); 
}); 

http://jsfiddle.net/uL545/1/

+0

Sí, usar jQuery para agregar el detector de eventos es mejor, pero su explicación es incorrecta. La función se encuentra, y su demostración todavía echos 'a' (debe hacer eco' b'). –

+0

Buen punto Felix, gracias. Respuesta actualizada –

+0

@Squeegy: Pseudo selector ': checked' hace su trabajo. ¡Muchas gracias! Mientras tengo el código funcionando, todavía no entiendo el comportamiento de la casilla de verificación de radio. Parece que el atributo 'checked' se comporta de manera diferente a los demás. Como se muestra en el siguiente ejemplo, la segunda alerta() muestra correctamente 'b', pero la primera alerta() aparece' a', lo cual es bastante más de lo que esperaba. ¿Podría explicarme más sobre esto? '$ ('# b'). Attr ('checked', true); $ ('# b'). AddClass ('prueba'); alert ($ ('input [name = "myname"] [checked]'). Val()); alert ($ ('[class = "test"]'). Val()); ' –

1

no creo que se le puede llamar

$.attr('checked',true); 

porque no hay selector de elementos en el primer lugar. $ debe ir seguido de $ ('selector_name'). ¡Buena suerte!

1

Funciona, pero

$('input[name="myname"][checked]').val() 

devolverá el valor del primer elemento con el atributochecked. Y el botón de radio a todavía tiene este atributo (y viene antes del botón b). Seleccionar b no eliminar el atributo checked de a.

Puede utilizar :checked de jQuery:

$('input[name="myname"]:checked').val() 

DEMO


Otras notas:

  • usando $('b').attr('checked',true); es suficiente.
  • Como mencionan otros, no use manejadores de eventos en línea, use jQuery para agregar el controlador de eventos.
1
$("input:radio").attr("checked",true); //for all radio inputs 

o

$("your id or class here").attr("checked",true); //for unique radios 

igualmente las mismas obras para ("marcada", "marcado")

108
$('.checkbox').attr('checked',true); 

se not work with from jQuery 1.6.

usar en su lugar

$('.checkbox').prop('checked',true); 
$('.checkbox').prop('checked',false); 
+9

¡Muchas gracias por este consejo! Estaba perdiendo mi cabello. – ellmo

+0

Lo mismo aquí, muchas gracias. Estoy usando la versión 10 de jquery. –

+0

Es una pita que esta respuesta no es la aceptada y la aceptada toma tanto espacio de pantalla ... – dermatthias

9
$('.checkbox').prop('checked',true); 
$('.checkbox').prop('checked',false); 

... funciona perfectamente con jquery1.9.1

3

Por qué no pruebas ES?

$('selector').is(':checked') /* result true or false */ 

Mirar un FAQ: jQuery .is() nos ordenan ;-)

Cuestiones relacionadas