如何為多個復選框綁定點擊事件處理程序？

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>