How to make the all select checkbox workable upon deselecting few of the checkboxes?

Question

I'm using PHP and Smarty for my website.For your reference I'm putting here the code snippet from smarty template alongwith the jQuery code:

<div class="spl-btn-wrap fl-left">
      <div class="spl-btn-in">
        <div class="spl-btn">
          <p id="parentCheckbox" class="custom-form"> 
            <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
            <a class="drop" href="#">more</a> 
          </p>

        </div> 
      </div>  
    </div>
<table class="tablesorter" cellpadding="0" cellspacing="0" border="0" id="tests_listing" width="100%">
{section name=tests loop=$all_tests}
<tr id="tests_listing-row-{$all_tests[tests].test_id}"><td class="dragHandle">
<td>
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tbl-test" >
   <tr>
     <th align="left">
      <p class="custom-form"> 
        <input class="custom-check checkBoxClass" type="checkbox" name="" id="">
        <label>{$all_tests[tests].test_name}</label>
      </p>
</th>
</tr>
</table>
  </td></tr>
  {sectionelse}
</table>
{literal}
<script type="text/javascript" language="javascript">
$(document).ready(function()  { 
    $(".view_test_details").colorbox({width:800, href:$(this).attr('href')});

  $("#ckbCheckAll").click(function () { 
    if ($(this).is(':not(:checked)'))
      $(".ez-checkbox").removeClass("ez-checked");

    if($(this).is(':checked'))
      $(".ez-checkbox").addClass("ez-checked");
  });

  $(".checkBoxClass").click(function(){  
     var all = $('.checkBoxClass');
    if (all.length === all.filter(':checked').length) {
      //$("p#parentCheckbox div").addClass("ez-checked");
      $("#ckbCheckAll").prop("checked", true);
    } else {
      //$("p#parentCheckbox div").removeClass("ez-checked"); 
      $("#ckbCheckAll").prop("checked", false);
    }
    if (!$(this).prop("checked")){
      //$("p#parentCheckbox div").removeClass("ez-checked");
      $("#ckbCheckAll").prop("checked",false);
    }
  });
});      
</script>
{/literal}

Now the scenario is when the page loads completely the following code wraps around the checkbox as follows:

<div class="ez-checkbox">
<input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
</div>

When the checkbox is selected the class named "ez-checked" added to the div as follows:

<div class="ez-checkbox ez-checked">
    <input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
    </div>

Upon unchecking the checkbox the class get removed. I want to work on this basic idea of applying and removing "ez-checked" class. Now I want to add the typical Select all checkbox functionality. I've written code for it. But the issue is it is working for all checkboxes. I want to make it workable if few checkboxes are selected too. Can you help me to resolve my issue? Thanks in advance. If you need any further information I can provide you with the same.

Answer 1

Try this (edited):

$('.checkBoxClass').on('change', function(e){
    var $target = $(e.target);
    $target.closest('div.ez-checkbox').toggleClass('ez-checked',$target.is(':checked'));
})

Uploaded a demo here:

http://jsfiddle.net/m7gzf/