2009-06-10 2 views
122

У меня есть радио кнопки в HTML, как это:Как сбросить радиокнопки в JQuery, так что никто не проверено

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

Это в виде тега, и когда пользователь отправляет форму, я хочу, чтобы все радио вернется к значению по умолчанию. Значение ни один из них не проверяется.

У меня есть этот код, но он дает ошибку говоря [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; 

Я делаю это в IE 6.

+0

Если @ lambacck Ответит не работает для вас увидеть ошибку трекера на сайте JQuery [http://bugs.jquery.com/ticket/10910]. Если вы (как и я ...) прокручивали набор радиокнопок, чтобы попытаться сбросить все значения по умолчанию, '# (selector) .prop ('checked', true);' fail, когда он следует пытаясь установить следующий переключатель в той же группе на непроверенный статус. Хитрость заключается в том, чтобы только установить переключатель в состояние «проверено» и позволить группе переключателей делать то, что он делает (снимите отметку с других). _. Кроме того, вызов '$ (селектор) .click();' работает и будет запускать любые ассоциированные события. –

ответ

235

В версиях от jQuery до использования 1.6:

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

В версиях JQuery после 1.6 вы должны использовать:

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

, но если вы используете 1.6.1 вы можете использовать первую форму (смотрите примечание 2 ниже).

Примечание 1: важно, что второй аргумент будет ложным, а не «ложь», так как«ложь» не falsy значение. т.е.

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

Примечание 2: По JQuery 1.6.0, теперь есть два аналогичных методов, .attr и .prop, которые делают два взаимосвязанных, но немного разные вещи. Если в этом конкретном случае советы, приведенные выше, работают, если вы используете 1.6.1+. Вышеуказанное не будет работать с 1.6.0, если вы используете 1.6.0, вам следует обновить его. Если вам нужны подробности, продолжайте читать.

Деталь: При работе с прямыми элементами HTML DOM, есть свойства, прикрепленные к элементу DOM (checked, type, value и т.д.), которые обеспечивают интерфейс с управлением состоянием страницы HTML. Существует также интерфейс .getAttribute/.setAttribute, который обеспечивает доступ к значениям атрибутов HTML, как указано в HTML. До 1.6 jQuery размыл различие, предоставив один метод, .attr, для доступа к обоим типам значений. jQuery 1.6+ предоставляет два метода: .attr и .prop, чтобы различать эти ситуации.

.prop позволяет вам установить свойство на элемент DOM, в то время как .attr позволяет установить значение атрибута HTML. Если вы работаете с обычным DOM и устанавливаете свойство checked, elem.checked, до true или false вы изменяете текущее значение (то, что видит пользователь) и возвращаемое значение отслеживает состояние на странице. elem.getAttribute('checked') однако возвращает только исходное состояние (и возвращает 'checked' или undefined в зависимости от исходного состояния из HTML). В версии 1.6.1+ с использованием .attr('checked', false) оба elem.removeAttribute('checked') и elem.checked = false, так как изменение вызвало много проблем с обратной совместимостью, и он не может действительно сказать, хотите ли вы установить атрибут HTML или свойство DOM. Дополнительную информацию см. В documentation for .prop.

+0

Для второго аргумента важно передать false, а не «false». – Casebash

+0

«false» для второго аргумента важно, потому что вторым аргументом является значение для установки. Если второй аргумент пуст, это означает, что мне присваивается значение первого элемента, соответствующего селектору. – lambacck

+1

@Noldorin - «Truthy» - это совершенно кропотливое слово. (Можете ли вы предложить лучший способ выразить понятие «правдивость» - используя только одно слово?) – nnnnnn

-3

Почему бы вам не сделать:

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

Вы не можете просто установить свойство checked в массиве, возвращенном из вызова jQuery, вы должны использовать функцию attr(), чтобы установить это свойство в элементах массива. – bdukes

+0

это не делает, то «unchecked» – 2009-06-10 17:54:51

10

Ваша проблема заключается в том, что селектор атрибутов не начинается с @.

Попробуйте это:

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

радио кнопку набор проверяется через 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> 

JQuery код:

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

Лучший способ установить Radiobuttons состояние в 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+) код, который предварительно выбрать одну кнопку:

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

В Jquery 1.6+ код является предпочтительным методом .prop():

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

Чтобы отменить выбор кнопки:

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

Or 

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

Наконец, после многих испытаний, я думаю, самый удобный и эффективный способ предустановка:

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

Актуализировать требуется с объектом JQueryUI.

Получение значения легко:

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

Испытано с JQuery 1.6.1, JQuery UI 1.8.

+0

Спасибо за код поиска. –

-1

Где у вас есть: <input type="radio" name="enddate" value="1" />

После значения = "1" вы также можете просто добавить unchecked =" false" />

линия будет тогда:

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

Эй, я думаю, ты оставил свой ответ неполным. – Amar

-1

Установите все переключатели обратно в по умолчанию:

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

Если вы хотите, чтобы очистить все радиокнопки в 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

Я знаю, что это старый и что это немного не по теме, но предположив, что вы хотели, чтобы снять только определенные кнопки радио в коллекции:

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

И если вы перейдя к списку радиокниг, вы можете использовать селектор: checked, чтобы получить только тот, который вы хотите.

$("#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"> 
Смежные вопросы