Как сделать так, чтобы радиокнопка была снята?
У меня есть группа радиокнопок, которые я хочу снять после отправки формы через AJAX с использованием jQuery. У меня есть следующая функция:
function clearForm(){
$('#frm input[type="text"]').each(function(){
$(this).val("");
});
$('#frm input[type="radio"]:checked').each(function(){
$(this).prop('checked', false);
});
}
С помощью этой функции я могу очищать значения в текстовых полях, но не удается снять отметки с радиокнопок.
Кстати, я также пробовал использовать $(this).val("");
, но это не сработало. Подскажите, как правильно снять отметки с радиокнопок?
5 ответ(ов)
Вам не нужно использовать функцию each
для этой задачи.
Чтобы снять галочки с радиокнопок, вы можете использовать следующий код:
$("input:radio").attr("checked", false);
Или:
$("input:radio").removeAttr("checked");
То же самое касается текстового поля:
$('#frm input[type="text"]').val("");
Однако, можно улучшить этот код, используя более короткий селектор:
$('#frm input:text').val("");
Таким образом, вы сможете сделать код более читаемым и лаконичным.
Попробуйте следующий код:
$(this).removeAttr('checked');
Дело в том, что многие браузеры интерпретируют checked="что-то"
как true
. Этот код полностью удалит атрибут checked.
Надеюсь, это поможет!
Это небольшая модификация плагина Лауринаса, основанная на коде Игоря. Она учитывает возможные метки, связанные с целевыми радио-кнопками:
(function ($) {
$.fn.uncheckableRadio = function () {
return this.each(function () {
var radio = this;
$('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
$(radio).data('wasChecked', radio.checked);
});
$('label[for="' + radio.id + '"]').add(radio).click(function () {
if ($(radio).data('wasChecked'))
radio.checked = false;
});
});
};
})(jQuery);
В этом коде мы добавляем обработчики событий mousedown
и click
к радио-кнопке и её метке. Когда пользователь нажимает на метку или кнопку, состояние wasChecked
сохраняется, чтобы мы могли узнать, была ли радио-кнопка выбрана изначально. При повторном нажатии состояние меняется, и если кнопка уже была выбрана, она снимается. Это позволяет более гибко управлять состоянием радио-кнопок в вашем интерфейсе.
Спасибо, Патрик, ты сделал мой день! Чтобы обработать событие выбора радиокнопки, нужно использовать mousedown
. Я улучшил код, чтобы он мог обрабатывать группу радиокнопок.
// Нам нужно привязать обработчик клика,
// так как в Firefox состояние кнопки checked устанавливается после mousedown, но до click
$('input:radio').bind('click mousedown', (function() {
// Захватываем статус радиокнопки в замыкании обработчика,
// чтобы не использовать глобальные переменные и каждая радиокнопка имела свой собственный статус.
// Это необходимо, чтобы потом снять выделение.
// Нам нужно хранить статус отдельно, так как браузер обновляет статус checked перед вызовом обработчика click,
// и радиокнопка всегда будет отмеченной.
var isChecked;
return function(event) {
// console.log(event.type + ": " + this.checked);
if(event.type == 'click') {
// console.log(isChecked);
if(isChecked) {
// Снять выделение и обновить статус
isChecked = this.checked = false;
} else {
// Обновить статус
// Браузер сам отметит кнопку
isChecked = true;
// Выполнить что-то, если радиокнопка выбрана
/*
if(this.value == 'somevalue') {
doSomething();
} else {
doSomethingElse();
}
*/
}
} else {
// Получаем правильный статус до того, как браузер его установит
// Мы используем событие onmousedown, так как это единственное кроссбраузерное событие для радиокнопок
isChecked = this.checked;
}
}
})());
Таким образом, вы сможете контролировать выбор радиокнопок, избегая проблем, связанных с различиями в поведении браузеров.
Ваш код выглядит неплохо, но его можно немного улучшить для большей читаемости и надежности. Вот как можно переписать ваш код в виде плагина jQuery, который позволяет пользователям "размечать" радиокнопки:
(function( $ ){
$.fn.uncheckableRadio = function() {
return this.each(function() {
var $radio = $(this);
// Сохраняем состояние при нажатии
$radio.mousedown(function() {
$radio.data('wasChecked', this.checked);
});
// Обрабатываем клик
$radio.click(function() {
if ($radio.data('wasChecked')) {
this.checked = false;
}
});
});
};
})( jQuery );
Использование
Теперь вы можете использовать этот плагин следующим образом:
$('input[type=radio]').uncheckableRadio();
Объяснение
- Создание плагина: Мы создаем
$.fn.uncheckableRadio
, что позволяет добавлять этот метод к объекту jQuery. - Сохранение состояния: При нажатии на радиокнопку, мы сохраняем её текущее состояние (проверено или нет) с помощью
data
. - Изменение состояния: Если радиокнопка уже была проверена, то при повторном нажатии она станет невыбранной.
Это простой и эффективный способ сделать радиокнопки "размечаемыми".
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как проверить радио-кнопку с помощью jQuery?
Как перенаправить на другую веб-страницу?
Как определить нажатие клавиши Esc?
Как получить данные формы с помощью JavaScript/jQuery?