javascript - "If"语句单击按钮后如何检查是否选中了多个复选框？

Question

我有一个按钮和 3 个复选框，单击按钮后，如果这些复选框中的一个或多个被选中，我想显示一条消息。如果可能的话，我更喜欢 Jquery 代码。谢谢，如有任何帮助，我们将不胜感激。

$(function() {
  $(".btn").click(function() {
    if ($('input[type="checkbox"]').is(":checked")) {
      if ($('input[name="box-1"]').is(":checked")) {
        $(".message").text("Box-1 is checked");
      }
      if ($('input[name="box-2"]').is(":checked")) {
        $(".message").text("Box-2 is checked");
      }
      if ($('input[name="box-3"]').is(":checked")) {
        $(".message").text("Box-3 is checked");
      }
    } else {
      $(".message").text("No box is checked");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="box-1">
<input type="checkbox" name="box-2">
<input type="checkbox" name="box-3">

<p class="message"></p>
<button class="btn">CLICK ME</button>

我的代码工作正常，但问题是消息显示只有一个 checkbox 被选中，我想显示例如:如果 box-1 和 box-3 被选中，消息将是“box-1 和 box-3 被选中”，与其他复选框相同。谢谢，如有任何帮助，我们将不胜感激。

Answer 1

问题是即使选中了多个框，.text()方法将默认为最后一个 if有条件的 is(":checked")等于 true总是覆盖所有以前的案例也是 true .

我建议创建一个变量来存储您要输出的消息，然后将每个 if 连接到它上面检查是true .我想你想在每个输出之间换行，所以只需输入 <br>在每一行的末尾。最后，使用 .html()设置.message的方法元素而不是 .text() .

$(function() {
  $(".btn").click(function() {
    if ($('input[type="checkbox"]').is(":checked")) {
      //create message variable to hold html to be inserted
      var message = "";

      if ($('input[name="box-1"]').is(":checked")) {
        message += "Box-1 is checked<br>";
      }

      if ($('input[name="box-2"]').is(":checked")) {
        message += "Box-2 is checked<br>";
      }

      if ($('input[name="box-3"]').is(":checked")) {
        message += "Box-3 is checked<br>";
      }

      //set using '.html()' instead of '.text()' so you can insert breaks yourself
      $(".message").html(message);
    } else {
      $(".message").text("No box is checked");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="box-1">
<input type="checkbox" name="box-2">
<input type="checkbox" name="box-3">

<p class="message"></p>
<button class="btn">CLICK ME</button>