使用JavaScript验证复选框。

Question

我想要一些关于复选框验证的帮助。

如果您查看下面的图片，当用户点击图片时，该复选框将被选中。

如果选中所有复选框，我想要的是提醒一条简单的信息。

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

        $( 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);

                }
            });
    });

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

提前谢谢你。

Answer 1

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

Answer 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

Answer 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!");
     }
   });
});