Как переключить переключатель с меткой

1. используйте атрибут for в метке

<label for='idHTML'>Learn HTML </label>

2. дать радио эквивалент идентификатора

<input id='idHTML' type = "radio" name = "choice" />

что ты имеешь ввиду под этим.__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>

Приветствуются любые предложения по улучшению этого кода.