5

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

10

У меня есть группа радиокнопок, которые я хочу снять после отправки формы через 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 ответ(ов)

0

Вам не нужно использовать функцию each для этой задачи.

Чтобы снять галочки с радиокнопок, вы можете использовать следующий код:

$("input:radio").attr("checked", false);

Или:

$("input:radio").removeAttr("checked");

То же самое касается текстового поля:

$('#frm input[type="text"]').val("");

Однако, можно улучшить этот код, используя более короткий селектор:

$('#frm input:text').val("");

Таким образом, вы сможете сделать код более читаемым и лаконичным.

0

Попробуйте следующий код:

$(this).removeAttr('checked');

Дело в том, что многие браузеры интерпретируют checked="что-то" как true. Этот код полностью удалит атрибут checked.

Надеюсь, это поможет!

0

Это небольшая модификация плагина Лауринаса, основанная на коде Игоря. Она учитывает возможные метки, связанные с целевыми радио-кнопками:

(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 сохраняется, чтобы мы могли узнать, была ли радио-кнопка выбрана изначально. При повторном нажатии состояние меняется, и если кнопка уже была выбрана, она снимается. Это позволяет более гибко управлять состоянием радио-кнопок в вашем интерфейсе.

0

Спасибо, Патрик, ты сделал мой день! Чтобы обработать событие выбора радиокнопки, нужно использовать 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;
        }
    }
})());

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

0

Ваш код выглядит неплохо, но его можно немного улучшить для большей читаемости и надежности. Вот как можно переписать ваш код в виде плагина 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();

Объяснение

  1. Создание плагина: Мы создаем $.fn.uncheckableRadio, что позволяет добавлять этот метод к объекту jQuery.
  2. Сохранение состояния: При нажатии на радиокнопку, мы сохраняем её текущее состояние (проверено или нет) с помощью data.
  3. Изменение состояния: Если радиокнопка уже была проверена, то при повторном нажатии она станет невыбранной.

Это простой и эффективный способ сделать радиокнопки "размечаемыми".

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь