时间戳

首页 > 解决方案 > 未选中部分或全部复选框时显示消息

javascript - 未选中部分或全部复选框时显示消息

问题描述

我的这个页面有多个复选框，点击后会出现一个元素。

我有这个精简的版本来简单地展示它：

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox 1: <input type="checkbox" id="check1"  onclick="box1()"><br>
Checkbox 2: <input type="checkbox" id="check2"  onclick="box2()">

<p id="fill">No boxes are checked</p>

<p id="text" style="display:none">Checkbox1 is CHECKED!</p>
<p id="text2" style="display:none">Checkbox2 is CHECKED!</p>


<script>
function box1() {
  var checkBox = document.getElementById("check1");
  var text = document.getElementById("text");
  var fill = document.getElementById("fill");
  if (checkBox.checked == true){
      text.style.display = "block";
      fill.style.display = "none";
  } else {
      text.style.display = "none";
      fill.style.display = "block";
  }
}
</script>
<script>
function box2() {
  var checkBox = document.getElementById("check2");
  var text = document.getElementById("text2");
  var fill = document.getElementById("fill");
  if (checkBox.checked == true){
    text.style.display = "block";
    fill.style.display = "none";
  } else {
     text.style.display = "none";
     fill.style.display = "block";
  }
 }
</script>

</body>
</html>

我的问题是文本显示甚至一个框被选中，如图所示。我怎样才能有效地做到这一点？谢谢！

在此处输入图像描述

标签： javascripthtmlcss

解决方案

我会在两个复选框中添加相同的侦听器，并让该侦听器检查两者的状态。然后，如果两者都未选中，则显示fill：

const isCheckeds = document.querySelectorAll('.is-checked');
const fill = document.querySelector('#fill');
function validate() {
  let anyChecked = false;
  document.querySelectorAll('input').forEach((checkbox, i) => {
    if (checkbox.checked) {
      anyChecked = true;
    }
    isCheckeds[i].style.display = checkbox.checked ? 'block' : 'none';
  });
  fill.style.display = anyChecked ? 'none' : 'block';
}
<p>Display some text when the checkbox is checked:</p>

Checkbox 1: <input type="checkbox" onclick="validate()"><br>
Checkbox 2: <input type="checkbox" onclick="validate()">

<p id="fill">No boxes are checked</p>

<p class="is-checked" style="display:none">Checkbox1 is CHECKED!</p>
<p class="is-checked" style="display:none">Checkbox2 is CHECKED!</p>

请注意，应避免使用内联处理程序。强烈考虑使用 Javascript 正确附加它们。您还可以考虑使用change侦听器而不是click侦听器（为了更好的可访问性），并且可以将输入包围在 a<label>中以使它们更易于点击：

const isCheckeds = document.querySelectorAll('.is-checked');
const fill = document.querySelector('#fill');
const checkboxes = document.querySelectorAll('input');
function validate() {
  let anyChecked = false;
  checkboxes.forEach((checkbox, i) => {
    if (checkbox.checked) {
      anyChecked = true;
    }
    isCheckeds[i].style.display = checkbox.checked ? 'block' : 'none';
  });
  fill.style.display = anyChecked ? 'none' : 'block';
}
for (const checkbox of checkboxes) {
  checkbox.addEventListener('change', validate);
}
<p>Display some text when the checkbox is checked:</p>

<label>Checkbox 1: <input type="checkbox"></label><br>
<label>Checkbox 2: <input type="checkbox"></label>

<p id="fill">No boxes are checked</p>

<p class="is-checked" style="display:none">Checkbox1 is CHECKED!</p>
<p class="is-checked" style="display:none">Checkbox2 is CHECKED!</p>

推荐阅读