переключатели не будут проверять / снимать флажок

#javascript #html #dom #frontend #radio

#javascript #HTML #формы #переключатель

Вопрос:

У меня есть несколько переключателей на моей веб-странице. при нажатии на переключатель он проверяет, но когда я нажимаю снова, он не отменяет проверку. я попытался добавить функцию JS onclick

 document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
        if(this.checked == true){
            this.checked = false;
        }
        else {
            this.checked = true;
        }
    }))

когда я добавил этот метод, он позволил мне снять флажок, но не позволил мне проверить ни один из них!
что я могу пропустить?

это мои флажки:

 <input type="radio" id="name" name="name"><br>
<input type="radio" id="age" name="age"><br>
<input type="radio" id="email" name="email"><br>

1. поставьте точку с запятой в конце.

2. JavaScript не обязательно требует точки с запятой. Я пытался, но это не имело никакого значения.

3. Обратитесь к этому, w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_radio

4. для ссылки, которой вы поделились, радиоприемники имеют одинаковое имя, поэтому один из них снимается, когда вы проверяете другой. т. Е. Вы можете выбрать только один. в моем случае радиостанции совершенно не связаны, и каждый из них ссылается на что-то другое. я пытаюсь иметь возможность проверять или отменять какие-либо проверки. может быть, все. возможно, нет.

5. если вы хотите выбрать только один, вы должны указать одинаковые имена. и выберите несколько переключателей, которым вы должны дать разные имена в моем ответе. но во втором условии лучше использовать флажок.

Ответ №1:

Все они имеют разные name значения атрибутов — поэтому их можно только проверять (потому что они не сравниваются с другим родственным значением radio). Я думаю, вы, возможно, ищете type="checkbox" вместо:

 <input type="checkbox" id="name" name="name"><br>
<input type="checkbox" id="age" name="age"><br>
<input type="checkbox" id="email" name="email"><br>

Ответ №2:

Пример: удерживайте Ctrl нажатой клавишу ( ⌘ на mac), чтобы снять флажок.

 var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i   ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}

 <input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

Развернуть фрагмент

1. могу ли я узнать, на что ссылается e? это то, что мне нужно определить в моем браузере или просто переменная? потому что e показывает undefined для этого решения

2. e это короткая ссылка var для объекта event, которая будет передана обработчикам событий.

Ответ №3:

Использовать <input type="checkbox" , нет <input type="radio" . Переключатель используется там, где вам нужно выбрать один из нескольких параметров (которые должны иметь одинаковый name ).

Например,

 <input type="radio" name="gender" id="male" value="male"> <br>
<input type="radio" name="gender" id="female" value="female"> <br>
<input type="radio" name="gender" id="other" value="other">

Развернуть фрагмент

Узнайте больше о переключателях и флажках.

Ответ №4:

  document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
    if(this.value == 0){
          this.checked = true;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 1;
      }
      else {

          this.checked = false;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 0;
      }      
}))

 <input type="radio" value="0" id="name" name="test"><br>
<input type="radio" value="0" id="age" name="test"><br>
<input type="radio" value="0" id="email" name="test"><br>

Развернуть фрагмент