如何为多个复选框绑定点击事件处理程序？

Question

如何添加当前选中复选框的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>

和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> 

Answer 2

document.getElementsByClassName返回一个NodeList并且您需要为每个绑定一个click event处理程序。

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

对于绑定event处理程序，您必须使用for循环并为每个checkbox DOM元素附加一个事件处理程序。

 var checkboxes=document.getElementsByClassName("highlight"); for(var i=0;i<checkboxes.length;i++){ checkboxes[i].onclick=function(){ console.log("Current index: "+i); if (checkboxes[i].checked) { checkboxes[i].style.outlineColor = "red"; checkboxes[i].style.outlineStyle = "solid"; } else { checkboxes[i].style.outlineColor = "none"; checkboxes[i].style.outlineStyle = "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> 

但是，如果您看的话，似乎会出现errors 。 这是因为在页面loads ， preparePage被调用并创建一个context 。 当您单击checkbox元素时，为i变量saved的最后一个值将为3 （如上述代码段所示）。

为什么这种行为？

因为preparePage()函数中只有一个作用域，所以i变量仅绑定到该范围内的一个值。 换句话说，每次循环更改i的值时，都会为该范围内引用它的所有内容更改它。

循环完成后， i变量的值为3。

话虽这么说，一种解决方案是使用let关键字。

 var checkboxes=document.getElementsByClassName("highlight"); for(let i=0;i<checkboxes.length;i++){ checkboxes[i].onclick=function(){ if (checkboxes[i].checked) { checkboxes[i].style.outlineColor = "red"; checkboxes[i].style.outlineStyle = "solid"; } else { checkboxes[i].style.outlineColor = "none"; checkboxes[i].style.outlineStyle = "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> 

另一种方法是使用立即调用的函数expression 。

对于closures ，请在这里看一看。

 var checkboxes=document.getElementsByClassName("highlight"); for(var i=0;i<checkboxes.length;i++){ (function(index){ checkboxes[index].onclick=function(){ if (checkboxes[index].checked) { checkboxes[index].style.outlineColor = "red"; checkboxes[index].style.outlineStyle = "solid"; } else { checkboxes[index].style.outlineColor = "none"; checkboxes[index].style.outlineStyle = "none"; } }; }(i)); } 

 .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> 

Answer 3

注意 ：document.getElementsByClassName引用元素组

除了document.getElementsByClassName（“ highlight”）之外，您还可以使用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();
};

我认为这可能对您有帮助

谢谢

Answer 4

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

在选择一个复选框，我已经预定义的类选择名称responded当复选框被选中，其get动态添加到复选框，我添加了一个change监听器，因为它听我们的DOM变化和操纵它。

结果，复选框周围显示了漂亮的边框。

 const form = document.getElementById('registrar'); const input = form.querySelector('input'); const ul = document.getElementById('invitedList'); form.addEventListener('submit', (e) => { e.preventDefault(); const text = input.value; input.value = ''; const li = document.createElement('li'); li.textContent = text; const label = document.createElement('label'); label.textContent = 'Confirmed'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; label.appendChild(checkbox); li.appendChild(label); ul.appendChild(li); }); ul.addEventListener('change', (e) => { const checkbox = event.target; const checked = checkbox.checked; const listItem = checkbox.parentNode.parentNode; if (checked) { listItem.className = 'responded'; } else { listItem.className = ''; } }); 

 /* responded */ .responded { transition: 0.4s; border-color: rgba(88, 183, 205, .9); } .responded label { transition: 0.4s; color: rgba(88, 183, 205, 1); } 

 <body> <div class="wrapper"> <header> <h1>RSVP</h1> <p>A Demo App</p> <form id="registrar"> <input type="text" name="name" placeholder="Invite Someone"> <button type="submit" name="submit" value="submit">Submit</button> </form> </header> <div class="main"> <h2>Invitees</h2> <ul id="invitedList"></ul> </div> </div> <script type="text/javascript" src="app.js"></script> </body>