не могу ввести addEventListener на флажок? - PullRequest
Новая
       29

не могу ввести addEventListener на флажок?

0 голосов
/ 20 октября 2019

db-kepala-ruangan.js 

 var checkbox = document.getElementsByName('checkbox');
      var dragon = document.createElement("label");
      dragon.innerHTML = "imam";
      for(var i = 0; i < checkbox.length; i++){
            checkbox[i].addEventListener("change", checkedOrNot)
          }

          function checkedOrNot() {
            var isChecked = this.checked;

            if (isChecked) { //checked
              console.log('checked');
            } else { //unchecked
              console.log('unchecked');
            }
          }

Я использую материализацию и облачный пожарный магазин для этого материала.

это полный проект https://github.com/imamdtechnolife/simpelkes

1 Ответ

0 голосов
/ 20 октября 2019

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

var inputList = document.getElementsByTagName('input');

for(var i = 0; i < inputList.length; i++){
    if(inputList[i].type == "checkbox") {
        inputList[i].addEventListener("change", checkedOrNot)
    }
}

function checkedOrNot() {
    var isChecked = this.checked;

    if (isChecked) { //checked
        console.log('checked');
    } else { //unchecked
        console.log('unchecked');
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


  <form action="#">
    <p>
      <label>
        <input type="checkbox" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" />
        <span>Filled in</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" disabled="disabled" />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
...