JavaScript 为复选框添加事件监听器？

Question

如何为我的项目做一个 addEventListener 复选框？我需要能够让它在未选中和选中时自动更新 (运行) 一个函数。我通过单选按钮完成了此操作，但对于最后这件事，我需要一个复选框。这是我的代码。

HTML

<html>
  <body>
    <div class="date">
      <h2>Time</h2>
      <br>
      <p id="time"></p>
      <br>
      <h2>Time Period Ends</h2>
      <br>
      <p id="time2">%TIME_PERIOD_ENDS%</p>
    </div>
    <div class="select">
      <input id="p1" class="radio" type="radio" name="period"  value="period1">Period 1
      <input id="p2" class="radio" type="radio" name="period"  value="period2">Period 2
      <input id="p3" class="radio" type="radio" name="period" value="period3">Period 3
      <input id="p41" class="radio" type="radio" name="period" value="period4">4(1)
      <input id="p42" class="radio" type="radio" name="period"  value="period4">4(2)
      <input id="p51" class="radio" type="radio" name="period" value="period5">5(1)
      <input id="p52" class="radio" type="radio" name="period"  value="period5">5(2)
      <input id="p61" class="radio" type="radio" name="period" value="period6">6(1)
      <input id="p62" class="radio" type="radio" name="period" value="period6">6(2)
      <input id="p7" class="radio" type="radio" name="period"  value="period7">Period 7
      <input id="p8" class="radio" type="radio" name="period"  value="period8">Period 8
      <br>
      <input id="nday" class="radio" type="radio" name="day" value="normal">Regular Day
      <input id="tday" class="radio" type="radio" name="day" value="thursday">Thursday
      <input id="reg" class="radio" type="radio" name="day" value="regularMon">Regular Monday
      <input id="full" class="radio" type="radio" name="day" value="fullMon">Full Monday
      <br>
      <input id="2hr" class="radio" type="checkbox" name="2hr" value="2hrDelay">2 Hour Delay
    </div>
  </body>
</html>

CSS

.date, h2 p  {
  text-align: center;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
.date h2  {
  margin: 0;
  padding: 0;
}
.date p  {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(#101010, #151515, #101010);
  border: 1px solid red;
  color: white;
  width: 875px;
  font-size: 225%;
}
.select  {
  text-align: center;
  font-family: arial;
  font-size: 125%;
  margin: 0;
  margin-top: 25px;
  padding: 0;
}
#instruct  {
  float: left;
  font-family: arial;
  font-size: 110%;
  display: inline-block;
  width: 169px;
  position: relative;
  bottom: 400px;
  padding-top: 10px;
  margin: 0;
  border: 2px solid #000;
  border-radius: 3px;
}
h4  {
  margin: 0;
  padding: 0;
}

JavaScript

var setTime = setInterval(function() {
  clock()
}, 1000)

function clock() {
  var d = new Date();
  d.setMinutes(d.getMinutes() + 1); // Add 2 minutes
  document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
window.onload = function()  {
  clock();
}
var ringerTime = function()  {
  var mark = document.getElementById("time2");
  var norm = document.getElementById("nday");
  var thur = document.getElementById("tday");
  var redN = document.getElementById("reg");
  var redF = document.getElementById("full");
  var delay = document.getElementById("2hr");
  var period1 = document.getElementById("p1");
  var period2 = document.getElementById("p2");
  var period3 = document.getElementById("p3");
  var period41 = document.getElementById("p41");
  var period42 = document.getElementById("p42");
  var period51 = document.getElementById("p51"); 
  var period52 = document.getElementById("p52");
  var period61 = document.getElementById("p61");
  var period62 = document.getElementById("p62");
  var period7 = document.getElementById("p7");
  var period8 = document.getElementById("p8");
  console.log(period1.checked);
  console.log(norm);
  if(period1.checked && norm.checked)  {
    mark.innerHTML = "8:56:00 AM";
  }
  else if(period1.checked && thur.checked)  {
    mark.innerHTML = "8:49:00 AM";
  }
  else if(period1.checked && redN.checked)  {
    mark.innerHTML = "8:53:00 AM";
  }
  else if(period1.checked && redF.checked)  {
    mark.innerHTML = "8:51:00 AM";
  }
  else if(period1.checked && delay.checked)  {
    mark.innerHTML = "10:38:00 AM";
  }
  if(period2.checked && norm.checked)  {
    mark.innerHTML = "9:46:00 AM";
  }
  else if(period2.checked && thur.checked)  {
    mark.innerHTML = "9:32:00 AM";
  }
  else if(period2.checked && redN.checked)  {
    mark.innerHTML = "9:40:00 AM";
  }
  else if(period2.checked && redF.checked)  {
    mark.innerHTML = "9:35:00 AM";
  }
  else if(period2.checked && delay.checked)  {
    mark.innerHTML = "11:10:00 AM";
  }
  if(period3.checked && norm.checked)  {
    mark.innerHTML = "10:36:00 AM";
  }
  else if(period3.checked && thur.checked)  {
    mark.innerHTML = "10:15:00 AM";
  }
  else if(period3.checked && redN.checked)  {
    mark.innerHTML = "10:27:00 AM"
  }
  else if(period3.checked && redF.checked)  {
    mark.innerHTML = "10:19:00 AM"
  }
  else if(period3.checked && delay.checked)  {
    mark.innerHTML = "2:18:00 PM"
  }
  if(period41.checked && norm.checked)  {
    mark.innerHTML = "11:26:00 AM"
  }
  else if(period41.checked && thur.checked)  {
    mark.innerHTML = "10:57:00 AM"
  }
  else if(period41.checked && redN.checked)  {
    mark.innerHTML = "11:14:00 AM"
  }
  else if(period41.checked && redF.checked)  {
    mark.innerHTML = "11:03:00 AM"
  }
  else if(period41.checked && delay.checked)  {
    mark.innerHTML = "11:51:00 AM"
  }
  if(period42.checked && norm.checked)  {
    mark.innerHTML = "12:00:00 PM";
  }
  else if(period42.checked && thur.checked)  {
    mark.innerHTML = "11:31:00 AM";
  }
  else if(period42.checked && redN.checked)  {
    mark.innerHTML = "11:48:00 AM";
  }
  else if(period42.checked && redF.checked)  {
    mark.innerHTML = "11:37:00 AM";
  }
  else if(period42.checked && delay.checked)  {
    mark.innerHTML = "12:25:00 PM"
  }
  if(period51.checked && norm.checked)  {
    mark.innerHTML = "12:15:00 PM"
  }
  else if(period51.checked && thur.checked)  {
    mark.innerHTML = "11:29:00 AM"
  }
  else if(period51.checked && redN.checked)  {
    mark.innerHTML = "12:01:00 PM"
  }
  else if(period51.checked && redF.checked)  {
    mark.innerHTML = "11:47:00 AM"
  }
  else if(period51.checked && delay.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  if(period52.checked && norm.checked)  {
    mark.innerHTML = "12:50:00 PM";
  }
  else if(period52.checked && thur.checked)  {
    mark.innerHTML = "12:13:00 PM";
  }
  else if(period52.checked && redN.checked)  {
    mark.innerHTML = "12:35:00 PM";
  }
  else if(period52.checked && redF.checked)  {
    mark.innerHTML = "12:21:00 PM";
  }
  else if(period52.checked && delay.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  if(period61.checked && norm.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  else if(period61.checked && thur.checked)  {
    mark.innerHTML = "12:31:00 PM";
  }
  else if(period61.checked && redN.checked)  {
    mark.innerHTML = "12:48:00 PM";
  }
  else if(period61.checked && redF.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  else if(period61.checked && delay.checked)  {
    mark.innerHTML = "1:13:00 PM"
  }
  if(period62.checked && norm.checked)  {
    mark.innerHTML = "1:40:00 PM";
  }
  else if(period62.checked && thur.checked)  {
    mark.innerHTML = "12:55:00 PM";
  }
  else if(period62.checked && redN.checked)  {
    mark.innerHTML = "1:22:00 PM"
  }
  else if(period62.checked && redF.checked)  {
    mark.innerHTML = "1:09:00 PM"
  }
  else if(period62.checked && delay.checked)  {
    mark.innerHTML = "1:47:00 PM"
  }
  if(period7.checked && norm.checked)  {
    mark.innerHTML = "2:30:00 PM";
  }
  else if(period7.checked && thur.checked)  {
    mark.innerHTML = "1:37:00 PM";
  }
  else if(period7.checked && redN.checked)  {
    mark.innerHTML = "2:09:00 PM";
  }
  else if(period7.checked && redF.checked)  {
    mark.innerHTML = "1:51:00 PM";
  }
  else if(period7.checked && delay.checked)  {
    mark.innerHTML = "2:49:00 PM"
  }
  if(period8.checked && norm.checked)  {
    mark.innerHTML = "3:20:00 PM";
  }
  else if(period8.checked && thur.checked)  {
    mark.innerHTML = "2:20:00 PM";
  }
  else if(period8.checked && redN.checked)  {
    mark.innerHTML = "2:56:00 PM";
  }
  else if(period8.checked && redF.checked)  {
    mark.innerHTML = "2:35:00 PM";
  }
  else if(period8.checked && delay.checked)  {
    mark.innerHTML = "3:20:00 PM"
  }
}
window.onload = function()  {
  clock();
  document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
  ringerTime();
};
document.getElementById("p1").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p2").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p3").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p41").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p42").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p51").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p52").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p61").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p62").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p7").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p8").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("full").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("nday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("tday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("reg").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("2hr").addEventListener("change", function()  {
  check();
  ringerTime();
});

我试过的

我尝试在标签上添加一个使用事件侦听器触发的函数（来自 this question 的解决方案），但它似乎不起作用。

注意事项

请保存在 JavaScript，我还不知道 jQuery...

代码片段

var setTime = setInterval(function() {
  clock()
}, 1000)

function clock() {
  var d = new Date();
  d.setMinutes(d.getMinutes() + 1); // Add 2 minutes
  document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
window.onload = function()  {
  clock();
}
var ringerTime = function()  {
  var mark = document.getElementById("time2");
  var norm = document.getElementById("nday");
  var thur = document.getElementById("tday");
  var redN = document.getElementById("reg");
  var redF = document.getElementById("full");
  var delay = document.getElementById("2hr");
  var period1 = document.getElementById("p1");
  var period2 = document.getElementById("p2");
  var period3 = document.getElementById("p3");
  var period41 = document.getElementById("p41");
  var period42 = document.getElementById("p42");
  var period51 = document.getElementById("p51"); 
  var period52 = document.getElementById("p52");
  var period61 = document.getElementById("p61");
  var period62 = document.getElementById("p62");
  var period7 = document.getElementById("p7");
  var period8 = document.getElementById("p8");
  console.log(period1.checked);
  console.log(norm);
  if(period1.checked && norm.checked)  {
    mark.innerHTML = "8:56:00 AM";
  }
  else if(period1.checked && thur.checked)  {
    mark.innerHTML = "8:49:00 AM";
  }
  else if(period1.checked && redN.checked)  {
    mark.innerHTML = "8:53:00 AM";
  }
  else if(period1.checked && redF.checked)  {
    mark.innerHTML = "8:51:00 AM";
  }
  else if(period1.checked && delay.checked)  {
    mark.innerHTML = "10:38:00 AM";
  }
  if(period2.checked && norm.checked)  {
    mark.innerHTML = "9:46:00 AM";
  }
  else if(period2.checked && thur.checked)  {
    mark.innerHTML = "9:32:00 AM";
  }
  else if(period2.checked && redN.checked)  {
    mark.innerHTML = "9:40:00 AM";
  }
  else if(period2.checked && redF.checked)  {
    mark.innerHTML = "9:35:00 AM";
  }
  else if(period2.checked && delay.checked)  {
    mark.innerHTML = "11:10:00 AM";
  }
  if(period3.checked && norm.checked)  {
    mark.innerHTML = "10:36:00 AM";
  }
  else if(period3.checked && thur.checked)  {
    mark.innerHTML = "10:15:00 AM";
  }
  else if(period3.checked && redN.checked)  {
    mark.innerHTML = "10:27:00 AM"
  }
  else if(period3.checked && redF.checked)  {
    mark.innerHTML = "10:19:00 AM"
  }
  else if(period3.checked && delay.checked)  {
    mark.innerHTML = "2:18:00 PM"
  }
  if(period41.checked && norm.checked)  {
    mark.innerHTML = "11:26:00 AM"
  }
  else if(period41.checked && thur.checked)  {
    mark.innerHTML = "10:57:00 AM"
  }
  else if(period41.checked && redN.checked)  {
    mark.innerHTML = "11:14:00 AM"
  }
  else if(period41.checked && redF.checked)  {
    mark.innerHTML = "11:03:00 AM"
  }
  else if(period41.checked && delay.checked)  {
    mark.innerHTML = "11:51:00 AM"
  }
  if(period42.checked && norm.checked)  {
    mark.innerHTML = "12:00:00 PM";
  }
  else if(period42.checked && thur.checked)  {
    mark.innerHTML = "11:31:00 AM";
  }
  else if(period42.checked && redN.checked)  {
    mark.innerHTML = "11:48:00 AM";
  }
  else if(period42.checked && redF.checked)  {
    mark.innerHTML = "11:37:00 AM";
  }
  else if(period42.checked && delay.checked)  {
    mark.innerHTML = "12:25:00 PM"
  }
  if(period51.checked && norm.checked)  {
    mark.innerHTML = "12:15:00 PM"
  }
  else if(period51.checked && thur.checked)  {
    mark.innerHTML = "11:29:00 AM"
  }
  else if(period51.checked && redN.checked)  {
    mark.innerHTML = "12:01:00 PM"
  }
  else if(period51.checked && redF.checked)  {
    mark.innerHTML = "11:47:00 AM"
  }
  else if(period51.checked && delay.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  if(period52.checked && norm.checked)  {
    mark.innerHTML = "12:50:00 PM";
  }
  else if(period52.checked && thur.checked)  {
    mark.innerHTML = "12:13:00 PM";
  }
  else if(period52.checked && redN.checked)  {
    mark.innerHTML = "12:35:00 PM";
  }
  else if(period52.checked && redF.checked)  {
    mark.innerHTML = "12:21:00 PM";
  }
  else if(period52.checked && delay.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  if(period61.checked && norm.checked)  {
    mark.innerHTML = "1:06:00 PM"
  }
  else if(period61.checked && thur.checked)  {
    mark.innerHTML = "12:31:00 PM";
  }
  else if(period61.checked && redN.checked)  {
    mark.innerHTML = "12:48:00 PM";
  }
  else if(period61.checked && redF.checked)  {
    mark.innerHTML = "12:32:00 PM"
  }
  else if(period61.checked && delay.checked)  {
    mark.innerHTML = "1:13:00 PM"
  }
  if(period62.checked && norm.checked)  {
    mark.innerHTML = "1:40:00 PM";
  }
  else if(period62.checked && thur.checked)  {
    mark.innerHTML = "12:55:00 PM";
  }
  else if(period62.checked && redN.checked)  {
    mark.innerHTML = "1:22:00 PM"
  }
  else if(period62.checked && redF.checked)  {
    mark.innerHTML = "1:09:00 PM"
  }
  else if(period62.checked && delay.checked)  {
    mark.innerHTML = "1:47:00 PM"
  }
  if(period7.checked && norm.checked)  {
    mark.innerHTML = "2:30:00 PM";
  }
  else if(period7.checked && thur.checked)  {
    mark.innerHTML = "1:37:00 PM";
  }
  else if(period7.checked && redN.checked)  {
    mark.innerHTML = "2:09:00 PM";
  }
  else if(period7.checked && redF.checked)  {
    mark.innerHTML = "1:51:00 PM";
  }
  else if(period7.checked && delay.checked)  {
    mark.innerHTML = "2:49:00 PM"
  }
  if(period8.checked && norm.checked)  {
    mark.innerHTML = "3:20:00 PM";
  }
  else if(period8.checked && thur.checked)  {
    mark.innerHTML = "2:20:00 PM";
  }
  else if(period8.checked && redN.checked)  {
    mark.innerHTML = "2:56:00 PM";
  }
  else if(period8.checked && redF.checked)  {
    mark.innerHTML = "2:35:00 PM";
  }
  else if(period8.checked && delay.checked)  {
    mark.innerHTML = "3:20:00 PM"
  }
}
window.onload = function()  {
  clock();
  document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
  ringerTime();
};
document.getElementById("p1").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p2").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p3").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p41").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p42").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p51").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p52").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p61").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p62").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p7").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("p8").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("full").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("nday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("tday").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("reg").addEventListener("click", function()  {
  ringerTime();
});
document.getElementById("2hr").addEventListener("change", function()  {
  check();
  ringerTime();
});

.date, h2 p  {
  text-align: center;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
.date h2  {
  margin: 0;
  padding: 0;
}
.date p  {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(#101010, #151515, #101010);
  border: 1px solid red;
  color: white;
  width: 875px;
  font-size: 225%;
}
.select  {
  text-align: center;
  font-family: arial;
  font-size: 125%;
  margin: 0;
  margin-top: 25px;
  padding: 0;
}
#instruct  {
  float: left;
  font-family: arial;
  font-size: 110%;
  display: inline-block;
  width: 169px;
  position: relative;
  bottom: 400px;
  padding-top: 10px;
  margin: 0;
  border: 2px solid #000;
  border-radius: 3px;
}
h4  {
  margin: 0;
  padding: 0;
}

<html>
  <body>
    <div class="date">
      <h2>Time</h2>
      <br>
      <p id="time"></p>
      <br>
      <h2>Time Period Ends</h2>
      <br>
      <p id="time2">%TIME_PERIOD_ENDS%</p>
    </div>
    <div class="select">
      <input id="p1" class="radio" type="radio" name="period"  value="period1">Period 1
      <input id="p2" class="radio" type="radio" name="period"  value="period2">Period 2
      <input id="p3" class="radio" type="radio" name="period" value="period3">Period 3
      <input id="p41" class="radio" type="radio" name="period" value="period4">4(1)
      <input id="p42" class="radio" type="radio" name="period"  value="period4">4(2)
      <input id="p51" class="radio" type="radio" name="period" value="period5">5(1)
      <input id="p52" class="radio" type="radio" name="period"  value="period5">5(2)
      <input id="p61" class="radio" type="radio" name="period" value="period6">6(1)
      <input id="p62" class="radio" type="radio" name="period" value="period6">6(2)
      <input id="p7" class="radio" type="radio" name="period"  value="period7">Period 7
      <input id="p8" class="radio" type="radio" name="period"  value="period8">Period 8
      <br>
      <input id="nday" class="radio" type="radio" name="day" value="normal">Regular Day
      <input id="tday" class="radio" type="radio" name="day" value="thursday">Thursday
      <input id="reg" class="radio" type="radio" name="day" value="regularMon">Regular Monday
      <input id="full" class="radio" type="radio" name="day" value="fullMon">Full Monday
      <br>
      <input id="2hr" class="radio" type="checkbox" name="2hr" value="2hrDelay">2 Hour Delay
    </div>
    <div id="instruct">
      Instructions:
      Load the page.
      The Upper Time is equilivant to the current time. The Lower time is equilevant to the time the period ends.
      <hr>
      Configure:
      Select the period and the day for the time to update. For example, if it's a Wednesday and it's currently period 3, you'd select Period 3 and Normal Day. 
    </div>
  </body>
</html>

Answer 1

假设您的 HTML 是：

<input type="checkbox" id="checkBoxField" name="checkBoxField"/>

像这样添加监听器：

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#checkBoxField').addEventListener('change', changeHandler);
});

当然，您需要将其传递到函数中，例如：

function changeHandler(){
    if(nameOfField.checked){
        //do something
    }
    else{
        //do something else
    }
}

JavaScript 为复选框添加事件监听器？

JavaScript addEventListener for checkbox?

javascript

checkbox

HTML

CSS

JavaScript

我试过的

注意事项

代码片段