Как можно поменять статус при нажатии на div?

Question

[kirillinyakin]

<div class="form_radio_group-item col-6">
                                <input id="{{ item.sub_category__slug }}" type="radio" name="radio"
                                       value="{{ item.sub_category__slug }}" onMouseDown="this.isChecked=this.checked;"
                                       onClick="this.checked=!this.isChecked;">
                                <label for="{{ item.sub_category__slug }}">{{ item.sub_category__slug }}</label>
                            </div>

Здравствуйте, такой вопрос, так как я новичок в HTML, то у меня такой вопрос, так как, чтобы выбрать один из вариантов радиокнопки, то нужно нажать на сам input, а как сделать так, чтобы при нажатии на блок form_radio_group-item тоже выбирался один из input, и также чтобы изменялся, например цвет блок, соответствующего input?

Answer 1

[Seanyr]

Для form_radio_group-item использовать label вместо div.
Это так же подходит для создания кастомных элементов формы, как радиокнопки и чекбоксы. Их можно полностью скрывать со страницы, а все визуальные изменения делать с помощью привязанных к ним лейблов.
Для отслеживания состояния используется псевдокласс :checked

Пример

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

Comments

[cucumber111]

скажите, пожалуйста, сколько вы берете за верстку макета из 14 секций?