Не работает чекбокс html

Не работают кликабельные элементы формы (radio, checkbox)

Здравствуйте. Подскажите пожалуйста. Есть форма, которая находится в тегах

. На ней не работают кликабельные элементы. Не работает checkbox, radio, submit. Работу кнопки submit реализовал с помощью onclick=’this.form.submit();’. А с остальными что? Структура такова:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

nav> ul> li>a href="#1">1/a>/li> li>a href="#2">2/a>/li> /ul> /nav> . section id="1"> article> form> input type="checkbox"> /form> /article> /section> section id="2"> article> form> input type="checkbox"> /form> /article> /section>

Ну в общих чертах она такова. Кликаешь на чекбокс — ничего не происходит(не отмечается) и точно так же с radio. Позже вставил ссылку на эту форму — тоже не работает. Если правой кнопкой мышки нажать на ссылку и «окрыть в новой вкладке», то работает. Пробовал скопировать форму и вставить в другое место — все работает. Скажите, может какой то конфликт тегов

и ? Так же наверное стоит упомянуть, что секции — это модальные(всплывающие, поп ап) окна. Помогите разобраться.

Отщёлкиваются обратно элементы radio и checkbox
Здравствуйте, помогите мне пожалуйста. Есть страница, HTML+javascript, вставляю на неё, например.

Radio, checkbox и js
приветствую. Есть такая проблема: имеются на форме несколько разных элементов — input, text.

Свои checkbox И radio?
Как задать свои стили checkbox’ам и radio? У меня на сайте есть страница с тестом где нужно.

Калькулятор с radio и checkbox
Создаю калькулятор. Нужно без подключении библиотек. Не получается условие при выборе checkbox.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

nav> ul> li>a href="#1">1/a>/li> li>a href="#2">2/a>/li> /ul> /nav> . section id="1"> article> form> input type="checkbox" name="one" class="check1"> /form> /article> /section> section id="2"> article> form> input type="checkbox" name="two" class="check1"> /form> /article> /section>

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

Добавлено через 5 минут
Да и вообще, по структуре все в порядке. Форма рабочая. Без чекбоксов и радио все работает. Данные собираются и дальше я их отправляю на емейл. Я уже тестировал неоднократно. Не работает только чекбокс, радио и ссылка. Почему при клике на ссылку не происходит ничего, только становится active стилистически. Может есть решение на жабаскрипт? По типу, как для формы (onclick=’this.form.submit();’). Хотя конечно же хотелось бы разобраться, почему не работает.

Источник

Почему не кликается чекбокс?

не пойму в чем проблема. Чекбокс чекается по лэйблу, но не чекается по самому себе. В чем проблема закралась?

.checkbox-wrapper input(type='checkbox' name='checkbox').checkbox__input span.checkbox--custom label(for='checkbox100').checkbox text

.checkbox-wrapper < display: flex; >.checkbox < font-size: 16px; line-height: 1.88; letter-spacing: 1px; color: white; position: relative; top: -5px; color: black; &__input < display: none; &:checked + .checkbox--custom:before, &.active + .checkbox--custom:before < content: ''; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23E95E5E' fill-rule='evenodd' d='M7.879 13.657l8.131-8.132a.5.5 0 1 1 .708.707l-8.486 8.486a.5.5 0 0 1-.707 0l-4.243-4.243a.5.5 0 0 1 .708-.707l3.889 3.889z'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; position: absolute; min-width: 20px; height: 20px; top: 0; right: 0; bottom: 0; left: -1px; margin: auto; z-index: 10000; >&:checked + .checkbox--custom, &.active + .checkbox--custom < border: 1px solid white; &:hover < border: 1px solid red; >> > &--custom < cursor: pointer; display: inline-block; vertical-align: middle; min-width: 20px; height: 20px; border: 1px solid black; position: relative; transition: all 0.3s; margin-right: 20px; &:hover < border: 1px solid red; >> >

Во-первых, квадратик это не чекбокс.
Во-вторых, потому что checkbox—custom не имеет никакой обратной связи с чекбоксом.

Решение: квадратик сделать псевдоэлементом для label, а спан убрать вовсе.

Ankhena, не обязательно делать псевдоэлементом, тем более что при данной верстке (для инпута задан display:none) это не поможет

Сергей, почитай про родственные селекторы и про атрибуты для инпута, а именно checked

Вообще-то поможет.
При display none не будет табаться с клавиатуры и читаться читалками.
Но клик по псевдо от лейбла булет работать точно также как и сам лейбл.

Ankhena, Если делать — то сразу нормально, с табами и прочими плюшками. Должно быть сделано удобно для любых пользователей. Да и очевиднее

NaN, поменять на паттерн visually-hidden и все будет ок.

В любом случае, про «не поможет» лучше убрать, чтобы никого не дезинформировать.

Ankhena, останусь при своем: ваше решение — это плохое решение.
Одно дело display:none, другое visibility: hidden. Это все таки разные вещи.

NaN,
Ладно, по пунктам, последовательно:

1. ваш совет построен ровно на том же принципе, на соседних селекторах. Для стилизации инпутов именно соседних, а не родственных. Если нужно, объясню почему.
2.

Да, это разные вещи. И visibility: hidden в этой истории вообще не при делах, поскольку опять не помогут доступности.
Я же говорила про CSS паттерн visually-hidden.
Видео из выбранного ответа не смотрела, но надеюсь ТС будет использовать именно его, а не display:none и не visibility: hidden.

Источник

Почему не работает checkbox?

Здравствуйте, подскажите пожалуйста почему не работает checkbox, пытался стилизовать , но ничего не меняется, вот код, что тут не так?

, document.newad.featured, )" checked="checked" disabled="disabled"/>     

.noborders input[type="checkbox"]:checked, .noborders input[type="checkbox"]:not(:checked) < position: absolute; left: -9999px; >.noborders input[type="checkbox"]:checked + label, .noborders input[type="checkbox"]:not(:checked) + label < display: inline-block; position: relative; padding-left: 28px; line-height: 20px; cursor: pointer; >.noborders input[type="checkbox"] + label < padding-left: 28px; background-size: 20px 20px; background-position: 0 2px; >.noborders input[type="checkbox"]:checked + label < background-image: url(../s/check-active.svg); >.noborders input[type="checkbox"]:checked + label:before, .noborders input[type="checkbox"]:not(:checked) + label:before, < content: ""; position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; border: 1px solid #dddddd; background-color: #ffffff; >.noborders input[type="checkbox"]:checked + label:after, .noborders input[type="checkbox"]:not(:checked) + label:after, < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >.noborders input[type="checkbox"]:checked + label:after, .noborders input[type="checkbox"]:not(:checked) + label:after < left: 3px; top: 4px; width: 10px; height: 5px; border-radius: 1px; border-left: 4px solid #e145a3; border-bottom: 4px solid #e145a3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >.noborders input[type="radio"]:checked + label:after, .noborders input[type="radio"]:not(:checked) + label:after < left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 100%; background-color: #e145a3; >.noborders input[type="checkbox"]:not(:checked) + label:after < opacity: 0; >.noborders input[type="checkbox"]:checked + label:after

Источник

Почему оформленные чекбоксы и радиокнопки не реагируют на нажатия?

Реализовал кастомные чекбоксы и радиокнопки. Они правильно отображаются (особенно при включённом атрибуте checked), но не реагируют на нажатия.

Как выглядит структура чекбоксов и радиокнопок:

Как правильно оформлять элементы управления так, чтобы они эффективно реагировали на действия пользователей?
CSS-код в комментариях.

Простой 9 комментариев

footer .check-selectors, footer .radio-selectors < display: block; margin-top: 2%; >footer .check-selectors .title-form, footer .radio-selectors .title-form < font-size: 70%; >footer .check-selectors div, footer .radio-selectors div < font-size: 90%; margin-top: 2px; >footer .check-selectors div input, footer .radio-selectors div input < top: 13%; position: relative; >footer .check-selectors div span, .objects-adding-search > footer .radio-selectors div span < padding-left: 2px; >footer .check-selectors div input, footer .radio-selectors div input < position: absolute; left: -9999px; >footer .check-selectors div input + span, footer .radio-selectors div input + span < display: inline-block; position: relative; padding-left: 28px; line-height: 20px; cursor: pointer; >footer .check-selectors div input + span:before, footer .radio-selectors div input + span:before < content: ""; position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; border: 1px solid darkgray; background-color: darkgray; >footer .check-selectors div input + span:before < border-radius: 2px; >footer .radio-selectors div input + span:before < border-radius: 100%; >footer .check-selectors div input + span:after, footer .radio-selectors div input + span:after < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >footer .check-selectors div input:checked + span:after < left: 3px; top: 4px; width: 10px; height: 5px; border-radius: 1px; border-left: 4px solid dodgerblue; border-bottom: 4px solid dodgerblue; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >footer .radio-selectors div input:checked + span:after < left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 100%; background-color: dodgerblue; >footer .check-selectors div input + span:after, footer .radio-selectors div input + span:after < opacity: 0; >footer .check-selectors div input:checked + span:after, footer .radio-selectors div input:checked + span:after

Конечно, не реагируют.
Вы их отправили абсолютом в космические дали.

Замените span на label и свяжите их с инпутами.
Сами инпуты лучше скрывать с помощью паттерна visually-hidden (гуглится)

Источник