Странное поведение при нажатии для флажков. Попытка записи в консоль браузера, когда установлен флажок

Question

Обычно, если я нажимаю на флажок, я хочу, чтобы имя флажка отображалось на консоли.

Вот соответствующая функция JavaScript и HTML.

JavaScript:

var list = [];

function test(){
      var checkBoxes = document.querySelectorAll('input[type=checkbox]')
    for(var i = 0; i < checkBoxes.length; i++) {
      checkBoxes[i].addEventListener('change',function(){
        if(this.checked){
          console.log(this.value)
          }
      });
  }
}

HTML:

<label><input type = "checkbox" onclick= "test()" name ="one" value ="one">test<br></label>
<label><input type = "checkbox" onclick= "test()" name ="two" value ="two" > test 1<br></label>
<label><input type = "checkbox" onclick= "test()" name ="three" value ="three" >test 2<br></label>
<label><input type = "checkbox" onclick= "test()" name ="four" value ="four" >test 3<br></label>
<label><input type = "checkbox" onclick= "test()" name ="five" value ="five" >test 4<br></label>
<label><input type = "checkbox" onclick= "test()" name ="six" value ="six" >Test 5<br></label>

Если я нажму на флажок, он должен показывать в консоли имя отмеченного флажка.

Однако происходит нечто действительно странное, и я не понимаю, почему это так. Я имею смутное представление о том, почему это происходит, но не совсем ясно.

Когда я нажимаю на первый флажок, например. Я нажимаю на флажок с именем «один». На консоли отображается:
один (при необходимости)

Но если я нажму на следующий флажок (например, я нажал на флажок с именем «четыре»). В консоли отображается:
четыре
четыре

И щелкнул следующий флажок (если он называется «пять») Консоль показывает:
пять
пять
пять

и т. Д .... (постепенно повторяя имя флажка, отображаемое на консоли каждый раз, когда я нажимаю на другой флажок)

Почему это повторяется? Когда я нажимаю на флажок, технически должно быть одно событие onclick. Почему он считает все остальные и повторяет бит console.log (this.value)?

Заранее спасибо всем, кто может дать некоторое представление о том, почему это происходит.

Answer 1

Вы получаете все чекбоксы на странице с document.querySelectorAll. Затем вы просматриваете список всех флажков в цикле for.

Вы можете получить идентификатор элемента, по которому щелкнули

var checkBox = event.target.id;

, затем просто отобразите имя с console.log(document.getElementById(checkBox).value)

Answer 2

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

Последовательность декодированных событий:

• Ваша страница загружена, пока ничего не сделано.
• Установите флажок => срабатывает onclick.
• test () вызывается, слушатель события для change прикрепляется к каждому флажку.
• Событие onchange запускается и достигает установленного обработчика.
• Событие регистрируется на консоли.
• Нажмите на другой флажок => срабатывает onclick.
• test () вызывается, к каждому флажку прикрепляется другой прослушиватель событий для change.
• Событие onchange запускается и достигает первого экземпляра установленного обработчика.
• Событие регистрируется на консоли.
• Событие onchange достигает второго экземпляра обработчика.
• Событие снова регистрируется на консоли.
• и так далее ...

Если вы хотите отслеживать все, я бы предложил следующий JS для устранения этой проблемы (для этого вообще не нужен атрибут onclick):

document.addEventListener('DOMContentLoaded', function (p_event) {
var l_checkboxes = document.querySelectorAll('input[type="checkbox"]');
var l_item;

  for(l_item of l_checkboxes)
    {
    l_item.addEventListener('change', function (p_event) {
      if(p_event.target.checked)
        console.log(p_event.target.value);
      }, false);
    }
  }, false);

Answer 3

Проблема в том, что у вас уже установлены встроенные обработчики событий click, а затем, когда вы нажимаете флажок, вы программно настраиваете второй для события change с помощью .addEventListener(). Поэтому КАЖДЫЙ раз, когда вы нажимаете флажок, вы добавляете еще один обработчик события change - - если значение флажка изменяется, запускается КАЖДЫЙ И КАЖДЫЙ обработчик, связанный с событием change. Чем больше вы нажимаете флажок, тем больше change событий вы настраиваете.

Теперь, чтобы установить change флажок, вам нужно click установить его. Таким образом, будущее click вызовет события click и change. Из-за этого способ, которым change работает с флажками и переключателями, обычно не используется, и вместо этого обычно работают обработчики click.

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

Кроме того, вам не нужно перебирать флажки в обработчике. Вы бы использовали цикл для настройки обработчиков.

// Get all the checkboxes into an Array
var checkBoxes = Array.prototype.slice.call(document.querySelectorAll('input[type=checkbox]'));

// Loop over the array only to set up event handlers on them
checkBoxes.forEach(function(cb) {
  // Set up an event handler
  cb.addEventListener('change',function(){
    // You don't need to loop again, just use the value of "this"
    if(this.checked){
      console.log(this.value);
    }
  });
});

<label><input type = "checkbox" name ="one" value ="one">test<br></label>
<label><input type = "checkbox" name ="two" value ="two" > test 1<br></label>
<label><input type = "checkbox" name ="three" value ="three" >test 2<br></label>
<label><input type = "checkbox" name ="four" value ="four" >test 3<br></label>
<label><input type = "checkbox" name ="five" value ="five" >test 4<br></label>
<label><input type = "checkbox" name ="six" value ="six" >Test 5<br></label>