Come resettare i pulsanti radio in jQuery in modo che nessuno sia selezionato

Ho i pulsanti di opzione in HTML in questo modo:

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

Questo è un tag del modulo e quando l'utente invia un modulo voglio riportare tutti i pulsanti di opzione al valore predefinito. Significa che nessuno di loro ha controllato.

Ho questo codice ma dà un errore dicendo [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;

Lo sto facendo in IE 6.

Nelle versioni di jQuery precedenti alla 1.6 utilizzare:

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

Nelle versioni di jQuery successive alla 1.6 dovresti usare:

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

ma se stai usando 1.6.1+ puoi usare il primo modulo (vedi nota 2 sotto).

Nota 1: è importante che il secondo argomento sia falso e non "falso" poiché "falso" non è un valore falso. vale a dire

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

Nota 2: A partire da jQuery 1.6.0, ora ci sono due metodi simili .attre .propche fanno due cose correlate ma leggermente diverse. Se in questo caso particolare, i consigli forniti sopra funzionano se si utilizza 1.6.1+. Quanto sopra non funzionerà con 1.6.0, se si utilizza 1.6.0, è necessario eseguire l'aggiornamento. Se vuoi i dettagli, continua a leggere.

Dettagli: Quando si lavora con elementi DOM HTML rettilinei, ci sono proprietà associate all'elemento DOM ( checked, type, value, ecc) che forniscono un'interfaccia per lo stato in esecuzione della pagina HTML. C'è anche l' interfaccia .getAttribute/ .setAttributeche fornisce l'accesso ai valori degli attributi HTML come forniti nell'HTML. Prima di 1.6 jQuery offuscava la distinzione fornendo un metodo .attr, per accedere a entrambi i tipi di valori. jQuery 1.6+ offre due metodi .attre .propper distinguere tra queste situazioni.

.prop ti permette di impostare una proprietà su un elemento DOM, mentre .attr consente di impostare un valore di attributo HTML. Se si lavora con un semplice DOM e si imposta la proprietà selezionata elem.checked, su trueo falsesi modifica il valore corrente (ciò che l'utente vede) e il valore restituito tiene traccia dello stato della pagina. elem.getAttribute('checked')tuttavia restituisce solo lo stato iniziale (e restituisce 'checked'o undefineddipende dallo stato iniziale dall'HTML). In 1.6.1+ l'utilizzo di .attr('checked', false)entrambi fa elem.removeAttribute('checked')e elem.checked = falsepoiché la modifica ha causato molti problemi di compatibilità con le versioni precedenti e non si può davvero dire se si desidera impostare l'attributo HTML o la proprietà DOM. Vedi maggiori informazioni nella documentazione di .prop .

Il modo migliore per impostare lo stato dei pulsanti radio in 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

Codice Jquery (1.4+) per preselezionare un pulsante:

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

Nel codice Jquery 1.6+ è preferito il metodo .prop ():

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

Per deselezionare i pulsanti:

$("[name=color]").removeAttr("checked");

Il tuo problema è che il selettore di attributi non inizia con a @ .

Prova questo:

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

$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

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

Alla fine, dopo molti test, penso che il modo più conveniente ed efficiente per preimpostare sia:

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

L'aggiornamento è richiesto con l'oggetto JQueryUI.

Recuperare il valore è semplice:

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

Testato con JQuery 1.6.1, JQuery UI 1.8.

So che questo è vecchio e che questo è un po 'fuori tema, ma supponendo che tu volessi deselezionare solo i pulsanti di opzione specifici in una raccolta:

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

E se hai a che fare con un elenco di pulsanti di opzione, puoi utilizzare il selettore: checked per ottenere solo quello che desideri.

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

Set di pulsanti di opzione controllato tramite 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>

codice jquery:

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

Se si desidera cancellare tutti i pulsanti di opzione nel DOM:

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

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

Anche se prop ha cambiato lo stato selezionato ma change mostra anche quello nel modulo.

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

Dove hai: <input type="radio" name="enddate" value="1" />

Dopo value = "1" puoi anche solo aggiungere unchecked =" false" />

La linea sarà quindi:

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

Ripristina tutti i pulsanti di opzione predefiniti:

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

Perché non lo fai:

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