Как определить нажатый и не нажатый radio?

Question

[busidoway]

Есть 6 кнопок radio разных цветов. Для белой кнопки было необходимо задать серую рамку. Пришлось написать скрипт. При нажатии на каждую кнопку, она выделяется красной рамкой при помощи css, кроме белой. Задача: выделять белую кнопку красной рамкой. Выделить получилось, а вот убрать выделение, когда нажата другая кнопка - нет. Как отловить событие, когда белая не нажата? Пример в ссылке.https://jsfiddle.net/busidoway/4fqheg77/2/

Вся html-ная верстка генерируется серверной частью. Поэтому html не могу изменять.

Comments

[Кирилл]

А что мешает белую тоже с помощью css красить, а не скриптом?

[busidoway]

Кирилл Кубляков: Кнопки не должны иметь рамки, кроме белой. Для белой задаем серую рамку (в данном случае внутреннюю тень), чтобы она была видна на белом фоне.

Answer 1

[Vitaliy Orlov]

Я предлагаю, искать белый фон, добавить ему класс с серой рамкой.

Далее повесить обработчик, в котором добавлять рамку выделения.

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

https://jsfiddle.net/4fqheg77/5/

Comments

[busidoway]

Действительно, с добавлением классов оказалось гораздо легче) Спасибо!

Answer 2

[Bowen]

Если я правильно понял, то:
https://jsfiddle.net/4fqheg77/3/

Comments

[busidoway]

При нажатии на кнопку должна появляться белая рамка и красная. Белую рамку я сделал бордером, а красную внешней тенью. В обычном состоянии у кнопок не должно быть рамок, кроме белой, для нее задаем серую внутреннюю тень. Нужно было определить заранее, какая из кнопок белая и задать для нее эту серую "рамку". Поэтому пришлось написать скрипт. И теперь нужно в скрипте выделять белую кнопку при нажатии серой внутренней тенью, белым бордером и красной внешней тенью. Выделить удалось, а убрать выделение при нажатии на другую кнопку - нет.
Вот такой велосипед, блин))

Answer 3

[Андрей Федоров]

Реально? Скрипт?
codepen.io/aliencash/pen/VjKdgp?editors=1100

Comments

[busidoway]

Извиняюсь, заранее не пояснил. Всю html-ную часть я не могу редактировать. Кнопки генерируются серверной частью, поэтому я не могу заранее знать, какая из кнопок будет белой.

[Андрей Федоров]

busidoway: У меня было сомнение, зачем человек так извращается. ) В jq/js помочь особо не могу, но мне кажется вам нужно добавить скрипт удаляющий рамку, т.к. стили назначенные в js можно только js'ом и удалить, css сам не справится.