无法在复选框上输入addEventListener吗？

Question

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

Answer 1

要将事件侦听器添加到所有复选框，您必须获取名称为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>
        

Answer 2

这是兄弟，https://drive.google.com/open?id=1uDkgp2vaVadYaXeK7q6CO5HELtiV9-l-

不显示日志“已选中”或“未选中”