使用 JavaScript 验证复选框。答案

【问题标题】：Validate checkbox using JavaScript.使用 JavaScript 验证复选框。
【发布时间】：2017-07-04 12:45:54
【问题描述】：

我需要有关复选框验证的帮助。

如果您查看下图，当用户单击图像时，复选框将被选中。

我想要的是，如果所有复选框都被选中，则会发出一条简单的消息。

这是通过单击图像来选择复选框的代码。

        $( document ).ready(function() {

    $("#roll-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>").click (function(){
         var $$ = $(this)

          if( !$$.is('.checked')){
              $$.addClass('checked');

              $('#imgCheck-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>').prop('checked', true);

                }
            });
    });

所以我可以通过单击图像来选择复选框。如果选中所有复选框，我如何提醒消息。很快用户点击最后一张图片，图片会消失，红色的复选框会出现，用户应该会看到警告信息。

提前谢谢你。

【问题讨论】：

标签： javascript validation checkbox

【解决方案1】：

您可以通过获取“已检查”类的元素数量来实现此目的。如果数字为 6，则可以显示警报。

【讨论】：

嗯，它可以是动态的。不一定，它总是6。很高兴有通用的解决方案。
是的，可能是这样，在这种情况下，OP 可以将代码调整为所需的。我只是给出一个关于如何解决这个问题的想法。
嗯，您可以将其添加为评论而不是答案。

【解决方案2】：

试试这个方法：

var checkboxes = $('[type="checkbox"]');
checkboxes.on('change', function() {
  var checked = $('[type="checkbox"]:checked');

  console.log('all:', checkboxes.length, ' / ', 'checked:', checked.length);

  if (checkboxes.length === checked.length) {
    console.log('ALL CHECKED!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3

【讨论】：

【解决方案3】：

您可以使用以下 javascript 代码：

$(function(){
   $('input[type="checkbox"]').click(function() {
     totalCheckboxCount = $('input[type="checkbox"]').length;
     selectedBoxesCount = $('input[type="checkbox"]:checked').length;
     if(totalCheckboxCount == selectedBoxesCount) {
       alert("All checkboxes selected!");
     }
   });
});

【讨论】：