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.

With such a complex problem, it would help if you set up a [JSFiddle](http://jsfiddle.net/) and posted the link. — Richard, Aug 23 '13 at 13:46
@Richard:Actually the issue in not making jsfiddle is I'm using Smarty template engine, so the format of HTML is dynamic and it wouldn't work out there. So I've written the code here itself. — PHPLover, Aug 23 '13 at 13:49
So you want to add the 'ez-checked' class to the div that contains the checked checkbox? Do I have that right? — StoicJester, Aug 23 '13 at 13:50
Exactly you got my problem. If I don't add the class then the functionality is not at all workable. — PHPLover, Aug 23 '13 at 13:53

HarryFink · Answer 1 · 2013-08-23T14:27:36.790

0

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/

edited Aug 23 '13 at 14:27

answered Aug 23 '13 at 14:01

HarryFink

1,010
1
6
6

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

1 Answers1