如果使用js在html中选中复选框，则发出警报（）[重复]答案

【问题标题】：making an alert() if checkbox is checked in html using js [duplicate]如果使用js在html中选中复选框，则发出警报（）[重复]
【发布时间】：2018-05-04 05:58:26
【问题描述】：

所以我写了一个 html 页面只是为了测试，但我不能让脚本工作，它只是说警报并选中复选框，但我希望当我选中复选框时，警报会出现。这是代码（没有 style.css）。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<p class="head1">SOME HEADING</p>
</header>
<div class="div1">
<h1>AN HEADING</h1>
<form>
<ul>
<li><input class="in1" id="checkboxid" type="checkbox">First Box</li>
<li><input class="in1" type="checkbox">Second Box</li>
<li><input class="in1" type="checkbox">Third Box</li>
</ul>
</form>
</div>
<script>
if (document.getElementById("checkboxid").checked = true) {
alert("You checked the first box.");
}
else {
alert("you didnt checked the box.");
}
</script>
</body>
</html>

【问题讨论】：

了解事件处理程序。

标签： javascript html css if-statement checkbox

【解决方案1】：

有一个错误，您使用的是= 而不是===。此外，您可以考虑使用change() 函数，当您第一次选中或不选中复选框时会触发该函数。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<p class="head1">SOME HEADING</p>
</header>
<div class="div1">
<h1>AN HEADING</h1>
<form>
<ul>
<li><input class="in1" id="checkboxid" type="checkbox" onclick="change()">First Box</li>
<li><input class="in1" type="checkbox">Second Box</li>
<li><input class="in1" type="checkbox">Third Box</li>
</ul>
</form>
</div>
<script>
function change(){
  if (document.getElementById("checkboxid").checked === true) {
    alert("You checked the first box.");
  }
  else {
    alert("you didnt checked the box.");
  }
}
</script>
</body>
</html>

【讨论】：

哦，好的，谢谢，我现在修复了它并使用了一个功能，所以它只有在我选中该框而不是页面加载时才会起作用，谢谢 Swakeert Jain 告诉我的问题是另一个问题的重复（见对问题的评论）。所以这就是我现在得到的：function checkbox() { if (document.getElementById("checkboxid").checked === true) { alert("You checked the first box."); } else { alert("you didnt checked the box."); } }
@IsraelShevkolenko，太好了，你解决了！快乐编码！您可以将答案标记为已接受并投票。