" 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>

​

Answer 2

检查选中多少复选框的长度？并以这种方式使用.map()：

​

$(function() {
  $(".btn").click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
      $(".message").text("Success! You have checked " + [...$('input[type="checkbox"]:checked').map(function () {
        return this.name;
      })].join(", ") + ".");
    } else {
      $(".message").text("Sorry! You should check at least 3 checkboxes!");
    }
  });
});

<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>

​

.map() 函数是做什么的？

.map()通过一个函数传递当前匹配集中的每个元素，生成一个包含返回值的新jQuery对象。

预览

​

​

Answer 3

首先查找所有复选框，然后将它们与and连接起来，如果有空格，则在复数中添加" are“，如果没有，则添加" is”表示单数，如果有输出，则添加“复选”。干杯。最后，如果存在输出，则将textbox设置为它，如果不存在，则返回"No被选中“。

​

$(function() {
  $(".btn").click(function() {
    let output = [...$('input[type="checkbox"]:checked')].reduce((acc, _, ind) => acc ? (acc + ` and Box-${ind+1}`) : `Box-${ind+1}`, "");
    if (output.split` `.length>1) output += " are ";
    else if (output) output += " is ";
    if (output) output += "checked."
    
    $(".message").text(output || "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>

​