Как сбросить радиокнопки в 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.