Как сбросить радиокнопки в jQuery, чтобы ни один не проверялся


136

У меня есть переключатели в HTML, как это:

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


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

Ответы:


270

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

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

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

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

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

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

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 и устанавливаете свойство selected elem.checked, на trueили falseвы изменяете текущее значение (то, что видит пользователь), и возвращаемое значение отслеживает состояние страницы. elem.getAttribute('checked')однако возвращает только начальное состояние (и возвращает 'checked'или undefinedзависит от исходного состояния из HTML). В 1.6.1+ использование .attr('checked', false)делает и то, elem.removeAttribute('checked')и другое, elem.checked = falseтак как изменение вызвало множество проблем обратной совместимости, и он не может точно сказать, хотите ли вы установить атрибут HTML или свойство DOM. Более подробную информацию смотрите в документации по .prop .


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

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

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

Хех, достаточно справедливо, возможно. Мы все, вероятно, понимаем, хотя я лично предпочел бы даже более формальную «правдивую» или «семантически правдивую».
Нолдорин

3
@Noldorin «Истина» и «ложь» - это термины, которые используют многие эксперты по Javascript, в том числе Брендан Эйч и Дуглас Крокфорд . Ключевым термином является ложь, так как логические оценки определяются 6 ложными значениями . Истина - логическое название противоположности лжи. Я думаю, что использование falsy было преднамеренно использовано, чтобы заставить вас думать, что это может быть не то, к чему вы привыкли (особенно если это происходит из других языков синтаксиса в стиле C, где 0 - false).
lambacck

53

Лучший способ установить состояние радиокнопок в 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");

10

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

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

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

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.


2

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

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

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

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

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

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

Хотя prop изменил проверенный статус, но изменения также показывают, что в форме.

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

-1

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

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

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

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

1
Эй, я думаю, что вы оставили свой ответ неполным.
Амар

-2

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

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

Функция checkboxradio () не определена в jQuery 2.x. Это расширение вы использовали?
justdan23

-3

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

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

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

это не делает тогда "непроверенным"
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.