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

これは、クラス 'checked'を持つ要素の数を取得することで実現できます。番号が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!"); 
    } 
    }); 
});