javascript - 如何绑定(bind)多个复选框的点击事件处理程序？

Question

如何添加当前选中复选框所在的 div 的边框。作为基础，我使用了在线类(class)中的代码，该类(class)实际上具有非常相似的功能。不幸的是，更改后，它不起作用。

HTML

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="box">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

和Javascript文件

function preparePage() {
  document.getElementsByClassName("highlight").onclick = function() {
    if (document.getElementsByClassName("highlight").checked) {
      // use CSS style to show it
      document.getElementsByClassName("box").style.border = "thick solid #0000FF";
    } else {
      // hide the div
      document.getElementsByClassName("box").style.border = "none";
    }
  };
  // now hide it on the initial page load.
  document.getElementsByClassName("box").style.border = "none";
}

window.onload = function() {
  preparePage();
};

此外，这里是 jsfiddle 链接:https://jsfiddle.net/ohth2n7e/1/

感谢您的宝贵时间!

Answer 1

一切正常。选择所有。并单击

document.getElementById('highlightall').onclick = function(){
var border = document.getElementsByClassName("highlight");
   for(i=0;i < border.length; i++)
   {
    border[i].checked = (this.checked)? true : false;
   }
}
  var border = document.getElementsByClassName("highlight");
  for(i=0;i < border.length; i++)
  {
  border[i].addEventListener("click", function() {
    if (this.checked) {
       this.parentElement.style.border = "thick solid #0000FF";
    } else {
       this.parentElement.style.border = "none";
    }
  });
  
}

.checkboxall {
background:#222;
padding:10px;
color:#fff;
}

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>