2009-06-10 7 views
122

tengo botones de radio en HTML así:Cómo restablecer radiobuttons en jQuery para que ninguno ha sido controlada

<td> 
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input> 
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input> 
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input> 
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input> 
</td> 

Se trata de una etiqueta de formulario, y cuando el usuario envía un formulario que quiero hacer toda la radio vuelve a los botones predeterminados. Significa que ninguno de ellos verificado.

tengo este código, pero le da un error que dice [0] is null or not an object

$('input[@name="correctAnswer"]')[0].checked = false; 
$('input[@name="correctAnswer"]')[1].checked = false; 
$('input[@name="correctAnswer"]')[2].checked = false; 
$('input[@name="correctAnswer"]')[3].checked = false; 

estoy haciendo esto en IE 6.

+0

Si la respuesta de @ lambacck no funciona, ve al gestor de fallos en el sitio jQuery [http://bugs.jquery.com/ticket/10910]. Si está (como yo lo estaba) haciendo un bucle a través de un conjunto de botones de radio para intentar restablecerlos a sus valores predeterminados, el '# (selector) .prop ('checked', true);' falla cuando le sigue intentar establecer un botón de opción posterior en el mismo grupo para un estado no verificado. El truco es - solo establecer el botón de radio en un estado verificado y dejar que el grupo de botones de radio haga lo que hace (desmarque los demás ...) _. Además, al llamar '$ (selector) .click();' funciona, y activará cualquier evento asociado. –

Respuesta

235

En versiones de jQuery antes de 1.6 uso:

$('input[name="correctAnswer"]').attr('checked', false); 

En las versiones de jQuery 1.6 después de que se debe utilizar:

$('input[name="correctAnswer"]').prop('checked', false); 

pero si está utilizando 1.6.1+ puede utilizar la primera forma (véase la nota 2 a continuación).

Nota 1: es importante que el segundo argumento sea falsa y no "falsa" desde "falsa" no es un valor Falsy. es decir,

if ("false") { 
    alert("Truthy value. You will see an alert"); 
} 

Nota 2: A partir de jQuery 1.6.0, ahora hay dos métodos similares, y .attr.prop que hacer dos cosas relacionadas pero ligeramente diferentes. Si en este caso particular, el consejo proporcionado arriba funciona si usa 1.6.1+. Lo anterior no funcionará con 1.6.0, si está utilizando 1.6.0, debe actualizar. Si quieres los detalles, sigue leyendo.

Detalles: Cuando se trabaja con elementos DOM HTML rectas, hay propiedades unidos al elemento DOM (checked, type, value, etc) que proporcionan una interfaz para el estado de ejecución de la página HTML. También existe la interfaz .getAttribute/.setAttribute que proporciona acceso a los valores del atributo HTML tal como se proporciona en el HTML. Antes de 1.6 jQuery difuminaba la distinción al proporcionar un método, .attr, para acceder a ambos tipos de valores. jQuery 1.6+ proporciona dos métodos, .attr y .prop para distinguir entre estas situaciones.

.prop le permite establecer una propiedad en un elemento DOM, mientras que .attr le permite establecer un valor de atributo HTML. Si está trabajando con DOM simple y establece la propiedad marcada, elem.checked, true o false, cambia el valor en ejecución (lo que el usuario ve) y el valor devuelto rastrea el estado de la página. elem.getAttribute('checked') sin embargo, solo devuelve el estado inicial (y devuelve 'checked' o undefined dependiendo del estado inicial del HTML). En 1.6.1+ usando .attr('checked', false) hace elem.removeAttribute('checked') y elem.checked = false ya que el cambio causó muchos problemas de compatibilidad con versiones anteriores y realmente no puede decir si usted quería establecer el atributo HTML o la propiedad DOM. Ver más información en el documentation for .prop.

+0

Es importante pasar falso en lugar de "falso" para el segundo argumento. – Casebash

+0

El "falso" para el segundo argumento es importante porque el segundo argumento es el valor para establecer. Si el segundo argumento está vacío, significa dame el valor del primer elemento que coincida con el selector. – lambacck

+1

@Noldorin - "Truthy" es una palabra perfectamente cromática. (¿Puedes sugerir una forma mejor de expresar el concepto de "verdad", usando solo una palabra?) – nnnnnn

-3

¿Por qué no haces:

$("#radio1, #radio2, #radio3, #radio4").checked = false; 
+1

No puede simplemente establecer la propiedad marcada en la matriz devuelta desde la llamada jQuery, debe usar la función attr() para establecer esa propiedad en los elementos dentro de la matriz. – bdukes

+0

esto no está haciendo 'desmarcado' –

10

Su problema es que el selector de atributos no se inicia con una @.

Prueba esto:

$('input[name="correctAnswer"]').attr('checked', false); 
0

Radio botón de ajuste comprobado a través de jQuery:

<div id="somediv" > 
<input type="radio" name="enddate" value="1" /> 
<input type="radio" name="enddate" value="2" /> 
<input type="radio" name="enddate" value="3" /> 
</div> 

código jQuery:

$('div#somediv input:radio:nth(0)').attr("checked","checked"); 
51

La mejor manera de establecer el estado radiobuttons en jQuery:

HTML:

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black 
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple 

Jquery (1.4+) código para pre-seleccionar un botón:

código
var presetValue = "black"; 
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked"); 

En Jquery 1.6+ se prefiere el método .prop():

var presetValue = "black"; 
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true); 

Para deseleccionar los botones:

$("[name=color]").removeAttr("checked"); 
4
$('#radio1').removeAttr('checked'); 
$('#radio2').removeAttr('checked'); 
$('#radio3').removeAttr('checked'); 
$('#radio4').removeAttr('checked'); 

Or 

$('input[name="correctAnswer"]').removeAttr('checked'); 
4

Finalmente, después de muchas pruebas, creo que la forma más conveniente y eficiente para preestablecer es: se requiere

var presetValue = "black"; 
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true); 
$("input[name=correctAnswer]").button("refresh");//JQuery UI only 

La actualización con el objeto jQueryUI.

Recuperando el valor es fácil:

alert($('input[name=correctAnswer]:checked').val()) 

probado con jQuery 1.6.1, jQuery UI 1.8.

+0

Gracias por el código de recuperación. –

-1

Cuando usted tiene: <input type="radio" name="enddate" value="1" />

Después value = "1" también puede simplemente añadir unchecked =" false" />

La línea será entonces:

<input type="radio" name="enddate" value="1" unchecked =" false" /> 
+1

Oye, creo que dejaste tu respuesta incompleta. – Amar

-1

Ajuste todos los botones de selección de nuevo a la predeterminado:

$("input[name='correctAnswer']").checkboxradio("refresh"); 
0

Si desea borrar todos los botones de radio en el DOM:

$('input[type=radio]').prop('checked',false);

0
<div id="radio"> 
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label> 
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label> 
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label> 
</div> 

$('#radio input').removeAttr('checked'); 
// Refresh the jQuery UI buttonset.     
$("#radio").buttonset('refresh'); 
0

Sé que esto es viejo y que esto es un poco fuera de tema, pero suponiendo que quería desactive los botones de radio única específicos en una colección:

$("#go").click(function(){ 
 
    $("input[name='correctAnswer']").each(function(){ 
 
     if($(this).val() !== "1"){ 
 
     $(this).prop("checked",false); 
 
     } 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input> 
 
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input> 
 
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input> 
 
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input> 
 
<input type="button" id="go" value="go">

Y si está d Con una lista de botones de radio, puede usar el selector: marcado para obtener el que desea.

$("#go").click(function(){ 
    $("input[name='correctAnswer']:checked").prop("checked",false); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input> 
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input> 
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input> 
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input> 
<input type="button" id="go" value="go"> 
Cuestiones relacionadas