Форма CSS: Стилизация родительского элемента (метки) радиоблока на основе отмеченного / непроверенного статуса - PullRequest
Новая
       42

Форма CSS: Стилизация родительского элемента (метки) радиоблока на основе отмеченного / непроверенного статуса

4 голосов
/ 30 октября 2010

Итак, у меня есть форма. Большинство вопросов, задаваемых в формах, используют радиовходы.

я иду с 

<label>Option1
    <input type="radio">
</label>
<label>Option2
    <input type="radio">
</label>

Я создаю стиль надписей с помощью: hover, слегка изменяя фон, чтобы указать, какой параметр вы выделяете. Однако я хочу, чтобы метка для выбранной опции имела другой цветной фон. Есть ли способ сделать это с помощью CSS, или я должен идти с JQuery? Я хочу объявить стиль для родителя (метки) отмеченного поля ввода.

После дальнейшего мозгового штурма я хотел бы изменить bkg-цвет родительского набора полей после заполнения всех обязательных полей. Я начинаю чувствовать, что jQuery - это путь сюда?

[Примечания:] Использование HTML5 / CSS3 / jQuery. Только должен быть совместим с Chrome или Firefox. Это то, что нужно запускать локально на ноутбуке, поэтому, пока он отлично работает на этом компьютере, мне не нужно беспокоиться о совместимости с более старыми браузерами и т. Д.:)

Редактировать: Решение от Ника Карвера. Несколько дополнений для правильной работы с переключателями. Проводка для полноты: 

$('input[type="radio"]').change(function() {
    var tmp=$(this).attr('name');
    $('input[name="'+tmp+'"]').parent("label").removeClass("checked");
    $(this).parent("label").toggleClass("checked", this.selected);      
});

$('input[type="checkbox"]').change(function() {
    $(this).parent("label").toggleClass("checked", this.selected);
});

Ответы [ 2 ]

2 голосов
/ 30 октября 2010

Нет способа с чистым CSS, так как вы стилизуете родительский , а не дочерний элемент. Если бы вы сделали это в jQuery, вы бы сделали что-то вроде: 

$("fieldset :radio").change(function() {
  $(this).closest("label").toggleClass("onClass", this.checked);
});

Общий стиль <fieldset> будет зависеть от вашей разметки. Если у вас есть какой-то контейнер, в котором находится каждая радиостанция, вы можете проверить, нет ли среди них элемента :checked внутри ... если они все есть, то используйте тот же .toggleClass() подход, чтобы включить или выключить этот класс «все проверено».

1 голос
/ 30 октября 2010

Не могу сделать это с ванильным CSS.Вам нужно было бы использовать jQuery для добавления некоторого поведения onclick к переключателям, которые добавляют / удаляют класс из метки для выбранного.Затем вы можете добавить класс: hover к вашему селектору.Для достижения наилучших результатов я думаю , что вам нужно убедиться, что ваши метки установлены для отображения: inline-block;для достижения наилучших результатов.

...