取消选中所有内容时显示消息，并在每次标记每个检查时显示其他消息答案

【问题标题】：Show message when unchecking everything and show other message every time I mark each check取消选中所有内容时显示消息，并在每次标记每个检查时显示其他消息
【发布时间】：2020-12-08 02:40:08
【问题描述】：

当我取消选中所有检查并且标记为一个或多个检查时显示另一条消息时，如何显示消息

<label for="1">Checkbox 1</label>
<input type="checkbox" class="check" name="1" value="1">
<label for="2">Checkbox 2</label>
<input type="checkbox" class="check" name="2" value="2">
<label for="3">Checkbox 3</label>
<input type="checkbox" class="check" name="3" value="3">

$(文档).ready(函数() { $("input[type="checkbox"]:checked").each(function() { 警报（“检查”）； }); });

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

您可以简单地检查length 的checked 复选框是否大于0 然后显示一些消息，否则显示"no checkbox checked" 消息。

演示代码：

$(".check").change(function() {
//get length of checked checkboxes
  var message = $(".somediv input[type=checkbox]:checked").length > 0 ? "More then 1 checkbox is checked" : "No checkbox is checked";
  console.log(message)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="somediv">
  <label for="1">Checkbox 1</label>
  <input type="checkbox" class="check" name="1" value="1">
  <label for="2">Checkbox 2</label>
  <input type="checkbox" class="check" name="2" value="2">
  <label for="3">Checkbox 3</label>
  <input type="checkbox" class="check" name="3" value="3">
</div>

【讨论】：

【解决方案2】：

您可以使用以下功能来完成这项工作：

（如果所有复选框都未选中，则显示不同的消息，否则显示简单的消息）

    function Validate() {
        var checked = 0;
 
        //Reference the Table.
        var tblFruits = document.getElementById("tblFruits");
 
        //Reference all the CheckBoxes in Table.
        var chks = tblFruits.getElementsByTagName("INPUT");
 
        //Loop and count the number of checked CheckBoxes.
        for (var i = 0; i < chks.length; i++) {
            if (chks[i].checked) {
                checked++;
            }
        }
 
        if (checked ==0) {
            alert("ALL CheckBoxes are UNCHECKED !");
        } else {
            alert("You have checked one or more checkboxes");
        }
    };

<div id="tblFruits">
<label for="1">Checkbox 1</label>
<input type="checkbox" class="check" onclick = "return Validate()" name="1" value="1">
<label for="2">Checkbox 2</label>
<input type="checkbox" class="check"onclick = "return Validate()"  name="2" value="2">
<label for="3">Checkbox 3</label>
<input type="checkbox" class="check" onclick = "return Validate()" name="3" value="3">  
    
    
    </div>

【讨论】：