Как сделать так, чтобы флажок «Выбрать все» работал при снятии нескольких флажков?

Я использую PHP и Smarty для своего веб-сайта. Для справки я помещаю здесь фрагмент кода из шаблона smarty вместе с кодом jQuery:

<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}

Теперь сценарий заключается в том, что когда страница загружается полностью, следующий код оборачивает флажок следующим образом:

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

Когда флажок установлен, класс с именем «ez-checked» добавляется в div следующим образом:

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

При снятии флажка класс удаляется. Я хочу поработать над этой основной идеей применения и удаления класса «ez-checked». Теперь я хочу добавить типичную функциональность флажка «Выбрать все». Я написал для него код. Но проблема в том, что он работает для всех флажков. Я хочу сделать его работоспособным, если также выбрано несколько флажков. Можете ли вы помочь мне решить мою проблему? Заранее спасибо. Если вам нужна дополнительная информация, я могу предоставить вам то же самое.


javascript checkbox jquery selectall
person PHPLover    schedule 23.08.2013    source источник
comment
При такой сложной проблеме было бы полезно настроить JSFiddle и опубликовать ссылку.   -  person Richard    schedule 23.08.2013
comment
@Richard: На самом деле проблема в том, что я не делаю jsfiddle, заключается в том, что я использую механизм шаблонов Smarty, поэтому формат HTML является динамическим, и это не сработает. Поэтому я написал код здесь сам.   -  person PHPLover    schedule 23.08.2013
comment
Итак, вы хотите добавить класс «ez-checked» в div, содержащий отмеченный флажок? Имею ли я это право?   -  person StoicJester    schedule 23.08.2013
comment
Точно у тебя моя проблема. Если я не добавлю класс, то функциональность вообще не будет работать.   -  person PHPLover    schedule 23.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это (отредактировано):

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

Загрузил демо здесь:

http://jsfiddle.net/m7gzf/

person HarryFink    schedule 23.08.2013