復選框的奇怪的onclick行為。 選中復選框后嘗試寫入瀏覽器控制台

Question

基本上，如果我單擊一個復選框，則希望該復選框的名稱顯示在控制台上。

這是相關的javascript函數和HTML。

javascript：

var list = [];

function test(){
      var checkBoxes = document.querySelectorAll('input[type=checkbox]')
    for(var i = 0; i < checkBoxes.length; i++) {
      checkBoxes[i].addEventListener('change',function(){
        if(this.checked){
          console.log(this.value)
          }
      });
  }
}

HTML：

<label><input type = "checkbox" onclick= "test()" name ="one" value ="one">test<br></label>
<label><input type = "checkbox" onclick= "test()" name ="two" value ="two" > test 1<br></label>
<label><input type = "checkbox" onclick= "test()" name ="three" value ="three" >test 2<br></label>
<label><input type = "checkbox" onclick= "test()" name ="four" value ="four" >test 3<br></label>
<label><input type = "checkbox" onclick= "test()" name ="five" value ="five" >test 4<br></label>
<label><input type = "checkbox" onclick= "test()" name ="six" value ="six" >Test 5<br></label>

如果單擊復選框，則應該在控制台中顯示復選框的名稱。

但是，確實發生了一些奇怪的事情，我不明白為什么會這樣。 我不清楚它為什么會發生，但還不清楚。

例如，當我單擊第一個復選框時。 我單擊名為“一個”的復選框。 控制台顯示：
一個（根據需要）

但是，如果我單擊下一個復選框（例如，我單擊了名為“四個”的復選框）。 在控制台中，它顯示：
四
四

然后單擊下一個復選框（如果它是名為“五個”的復選框），控制台將顯示：
五
五
五

依此類推。...（每次單擊另一個復選框時，都會重復顯示在控制台上的復選框名稱）

為什么重復？ 當我單擊復選框時，從技術上講應該有一個onclick事件。 它如何計算所有其他值並重復console.log（this.value）位？

在此先感謝任何可能對這種情況發生原因有所了解的人。

Answer 1

問題是您已經設置了內聯click事件處理程序，然后單擊復選框時，可以使用.addEventListener()以編程方式為change事件設置第二個事件處理程序。 因此，每當您單擊復選框時，都會添加另一個change事件處理程序--如果復選框值被更改，則與change事件關聯的每個和每個處理程序都將運行。 單擊復選框的次數越多，設置的change事件就越多。

現在，為了change復選框，您需要click它。 因此，未來的click會同時觸發click和change事件。 由於這種change可以與復選框和單選按鈕一起使用，因此通常不使用它，而click處理程序通常可以完成工作。

不應使用內聯事件處理程序，它們是20多年的老技術， 存在很多錯誤 。

此外，你不通過處理程序的復選框需要循環。 您將使用循環來設置處理程序。

 // Get all the checkboxes into an Array var checkBoxes = Array.prototype.slice.call(document.querySelectorAll('input[type=checkbox]')); // Loop over the array only to set up event handlers on them checkBoxes.forEach(function(cb) { // Set up an event handler cb.addEventListener('change',function(){ // You don't need to loop again, just use the value of "this" if(this.checked){ console.log(this.value); } }); }); 

 <label><input type = "checkbox" name ="one" value ="one">test<br></label> <label><input type = "checkbox" name ="two" value ="two" > test 1<br></label> <label><input type = "checkbox" name ="three" value ="three" >test 2<br></label> <label><input type = "checkbox" name ="four" value ="four" >test 3<br></label> <label><input type = "checkbox" name ="five" value ="five" >test 4<br></label> <label><input type = "checkbox" name ="six" value ="six" >Test 5<br></label> 

Answer 2

問題在於，每當單擊一個復選框時，您都會將事件偵聽器添加到每個復選框。 這意味着每次您單擊復選框時，都會顯示更多處理程序，這些處理程序將記錄到控制台。

解碼事件的順序：

• 您的頁面已加載，到目前為止尚未完成任何操作。
• 單擊復選框=>觸發onclick。
• 調用test（）時，用於change的事件偵聽器change附加到每個復選框。
• onchange事件將觸發並到達已安裝的處理程序。
• 該事件將記錄到控制台。
• 單擊另一個復選框=>觸發onclick。
• 調用test（）時，將另一個用於change事件偵聽器附加到每個復選框。
• onchange事件將觸發並到達已安裝處理程序的第一個實例。
• 該事件將記錄到控制台。
• onchange事件到達處理程序的第二個實例。
• 該事件再次記錄到控制台。
• 等等...

如果您想跟蹤所有情況，建議使用以下JS來消除此問題（根本不需要onclick屬性）：

document.addEventListener('DOMContentLoaded', function (p_event) {
var l_checkboxes = document.querySelectorAll('input[type="checkbox"]');
var l_item;

  for(l_item of l_checkboxes)
    {
    l_item.addEventListener('change', function (p_event) {
      if(p_event.target.checked)
        console.log(p_event.target.value);
      }, false);
    }
  }, false);

Answer 3

您將使用document.querySelectorAll獲取頁面上的所有復選框。 然后，您將循環瀏覽for循環中所有復選框的列表。

您可以獲取單擊的元素的ID

var checkBox = event.target.id;

然后只需使用console.log(document.getElementById(checkBox).value)顯示名稱