Как переключить переключатель с меткой
Я хотел бы отменить выбор переключателя, когда я нажимаю на метку, и следующий код работает, как и ожидалось, только если я нажимаю на саму кнопку.
Как связать поведение метки с кнопкой?
<label>
<input type = "radio" name = "choice" value = "HTML" onMouseDown = "this.__chk = this.checked" onClick = "if (this.__chk) this.checked = false" /> Learn HTML
</label>
<label>
<input type = "radio" name = "choice" value = "Java" onMouseDown = "this.__chk = this.checked" onClick = "if (this.__chk) this.checked = false"/> Learn JavaScript
</label>
Это потому, что я не хочу, чтобы оба варианта были выбраны одновременно. Другими словами, это только одна возможность с возможностью отменить выбор, если это необходимо.
Ответы 5
- используйте атрибут for в метке
<label for='idHTML'>Learn HTML </label>
- дать радио эквивалент идентификатора
<input id='idHTML' type = "radio" name = "choice" />
Он не отвечает на вопрос, он работает так же, как и тот, о котором идет речь выше.
Ваши прослушиватели событий onMouseDown и onClick не имеют смысла. Я создал еще один пост, если вы могли бы проверить его.
Вы должны изменить свой другой пост тогда.
Что ты имеешь ввиду под этим.__chk
onMouseDown = "this.__chk = this.checked"
onClick = "if (this.__chk) this.checked = false"
Если вы хотите выбрать только один, вы можете использовать просто тип радио с группировкой опций с одним именем = «выбор»
Если вы хотите проверить и снять отметку с нескольких вариантов, вы можете использовать флажок
Радиокнопки работают не так, как вы думаете. Чтобы отменить выбор одного, вам нужно либо выбрать другой с тем же атрибутом name, либо сбросить форму. Функциональность, которую вы описываете, больше подходит для флажка, чем для переключателя. См. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio для спецификаций. Вы также можете взглянуть на этот вопрос / ответ: Сбросить определенный элемент ввода в HTML-форме.
Кроме того, нет необходимости оборачивать тег label вокруг ввода. Атрибут for отвечает за связь.
Если вы хотите отменить выбор радиокнопки, вам нужно будет сбросить форму.
form {
display: flex;
flex-direction: column;
}<form>
<label for = "ckb-01">
<input id = "ckb-01" type = "radio" name = "choice" value = "HTML" />
Learn HTML
</label>
<label for = "ckb-02">
<input id = "ckb-02" type = "radio" name = "choice" value = "Java" />
Learn JavaScript
</label>
<label for = "ckb-03">
<input id = "ckb-03" type = "radio" name = "choice" value = "Java" />
Learn CSS
</label>
<input type = "reset" />
</form>После многих попыток мне наконец удалось закодировать рабочее решение с помощью некоторого javascript.
Проблема в том, что как только переключатель нажат, его состояние меняется. предыдущее значение должно быть сохранено, чтобы знать, должно ли оно быть отменено или нет.
<main id = "form">
<label >
<input type = "radio" name = "rad" id = "Radio0" />Learn Html
</label>
<br><br>
<label>
<input type = "radio" name = "rad" id = "Radio1" />Learn CSS
</label>
<br><br>
<label>
<input type = "radio" name = "rad" id = "Radio2" />Learn Java
</label>
</main>
<script>
let buttons = document.querySelectorAll('#form input');
for (button of buttons){
button.dataset.waschecked = "false";
button.addEventListener('click', myFunction, false);
}
function myFunction(e) {
if (e.originalTarget.dataset.waschecked == "false"){
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.dataset.waschecked = "true";
e.originalTarget.checked =true;
}else {
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.checked =false;
}
}
</script>
Приветствуются любые предложения по улучшению этого кода.
Почему вы хотите использовать переключатели, если вы хотите снять их по щелчку? Для этого есть галочки.