Javascript 如何绑定多个复选框的单击事件处理程序？

如何添加复选框中当前选中的div的边框。作为基础，我使用了一个在线课程中的代码，该课程实际上具有非常相似的功能。不幸的是，更改后，它无法工作

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>

另外，这里是JSFIDLE链接：

---

谢谢你抽出时间

document.getElementsByClassName

返回一个

节点列表

，您需要为每个节点绑定click

事件处理程序

要设置复选框
border
，需要使用
outlineColor
和
outlineStyle
属性

对于绑定
事件
处理程序，必须使用
For
循环，并为每个
复选框
DOM元素附加一个事件处理程序


var复选框=document.getElementsByClassName（“突出显示”）；
对于（var i=0；i全部工作。全部选中。然后单击


document.getElementById（'highlightall'）。onclick=function（）{
var border=document.getElementsByClassName（“突出显示”）；
对于（i=0；i

.checkboxall{
背景：#222；
填充：10px；
颜色：#fff；
}

全部检查
复选框1
复选框2
复选框3
注意：document.getElementsByClassName指的是一组元素

除了document.getElementsByCassName（“突出显示”）之外，您还可以使用document.getElementById（“highlightall”）

更改Javascript文件，如下所示

function preparePage() {

document.getElementById("highlightall").onclick = function() {

if (document.getElementById("highlightall").checked) {

  // use CSS style to show it
  document.getElementsByClassName("checkbox")[0].style.border = "thick solid #FFFFFF";
} else {
  // hide the div
  document.getElementsByClassName("checkbox")[0].style.border = "none";
}
}
// now hide it on the initial page load.
document.getElementsByClassName("checkbox")[0].style.border = "none";
}

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

我想这可能对你有帮助

谢谢
我在代码中完成了以下方法，它对我很有帮助

在选择一个复选框时，我预定义了一个类选择器名称
responsed
，当选中该复选框时，它将被动态地添加到该复选框中，我还添加了一个
更改
侦听器，以侦听我们的DOM更改并对其进行操作

因此，复选框周围会显示一个漂亮的边框


const form=document.getElementById（'register'）；
常量输入=form.querySelector（'input'）；
const ul=document.getElementById（'invitedList'）；
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
常量文本=input.value；
input.value=''；
const li=document.createElement（'li'）；
li.textContent=文本；
const label=document.createElement（'label'）；
label.textContent='已确认'；
const checkbox=document.createElement（'input'）；
checkbox.type='checkbox'；
label.appendChild（复选框）；
li.儿童（标签）；
ul.儿童（li）；
});
ul.addEventListener（‘变更’，（e）=>{
const checkbox=event.target；
const checked=checkbox.checked；
const listItem=checkbox.parentNode.parentNode；
如果（选中）{
listItem.className='已响应'；
}否则{
listItem.className=''；
}
})；
/*已响应*/
.回答{
过渡：0.4s；
边框颜色：rgba（88183205.9）；
}
.回应标签{
过渡：0.4s；
颜色：rgba（88183205,1）；
}

冒险类游戏
演示应用程序

提交
受邀者

与
getElementById
相反，
getElementsByClassName
返回元素数组（因为多个元素可以具有相同的类）。
function preparePage() {

document.getElementById("highlightall").onclick = function() {

if (document.getElementById("highlightall").checked) {

  // use CSS style to show it
  document.getElementsByClassName("checkbox")[0].style.border = "thick solid #FFFFFF";
} else {
  // hide the div
  document.getElementsByClassName("checkbox")[0].style.border = "none";
}
}
// now hide it on the initial page load.
document.getElementsByClassName("checkbox")[0].style.border = "none";
}

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