Check/Uncheck All CheckboxFor в MVC

Question

В качестве продолжения моего предыдущего question, связанного с флажками в MVC. Я делал так, как this из этого question, но кажется, что он не работает из-за скрытого поля, созданного CheckBoxFor MVC. Любая идея почему? Вот мой fiddle показывает фактический HTML

Мой фактический HTML от CheckboxFor:

<form role="form"> 

       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false"> 
         <label for="1"><b>Faa</b></label> 

        </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false"> 
          <label for="2">Faa1</label> 

         </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="3" name="[1].IsSelected" type="checkbox" value="true"><input name="[1].IsSelected" type="hidden" value="false"> 
         <label for="3"><b>Fee</b></label> 

        </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="4" name="[1].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[0].IsSelected" type="hidden" value="false"> 
          <label for="4">Fee1</label> 

         </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="5" name="[1].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[1].IsSelected" type="hidden" value="false"> 
          <label for="5">Fee2</label> 

         </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="6" name="[2].IsSelected" type="checkbox" value="true"><input name="[2].IsSelected" type="hidden" value="false"> 
         <label for="6"><b>Fii</b></label> 

        </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="7" name="[2].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[0].IsSelected" type="hidden" value="false"> 
          <label for="7">Fii1</label> 

         </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="8" name="[2].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[1].IsSelected" type="hidden" value="false"> 
          <label for="8">Fii2</label> 

         </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="9" name="[3].IsSelected" type="checkbox" value="true"><input name="[3].IsSelected" type="hidden" value="false"> 
         <label for="9"><b>Foo</b></label> 

        </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="10" name="[3].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[3].SubsCategories[0].IsSelected" type="hidden" value="false"> 
          <label for="10">Foo1</label> 

         </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="11" name="[4].IsSelected" type="checkbox" value="true"><input name="[4].IsSelected" type="hidden" value="false"> 
         <label for="11"><b>Fuu</b></label> 

        </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="12" name="[5].IsSelected" type="checkbox" value="true"><input name="[5].IsSelected" type="hidden" value="false"> 
         <label for="12"><b>Bee</b></label> 

        </li> 
       </ul> 
       <ul class="col-xs-3"> 
        <li class="checkbox checkbox-info"> 
         <input id="13" name="[6].IsSelected" type="checkbox" value="true"><input name="[6].IsSelected" type="hidden" value="false"> 
         <label for="13"><b>Bii</b></label> 

        </li> 
         <li class="checkbox checkbox-info col-xs-offset-1"> 
          <input id="14" name="[6].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[6].SubsCategories[0].IsSelected" type="hidden" value="false"> 
          <label for="14">Bii1</label> 

         </li> 
       </ul> 

</form> 

Я пытаюсь проверить заголовок и все дочерние флажки будут проверены и если все дочерние Флажки быть чек, флажок родителя будет проверен и наоборот.

В JS Я пытаюсь работать на:

$('li :checkbox').on('click', function() { 
    var $chk = $(this), 
     $li = $chk.closest('li'), 
     $ul, $parent; 
    if ($li.has('ul')) { 
     $li.find(':checkbox').not(this).prop('checked', this.checked) 
    } 
    do { 
     $ul = $li.parent(); 
     $parent = $ul.siblings(':checkbox'); 
     if ($chk.is(':checked')) { 
      $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) 
     } else { 
      $parent.prop('checked', false) 
     } 
     $chk = $parent; 
     $li = $chk.closest('li'); 
    } while ($ul.is(':not(.someclass)')); 
}); 

UPDATE: Я сделал это работает с помощью приведенных ниже ответов. Вот рабочий ответ в fiddle. Я выполнил предложения, установив флаг, если флажок является родительским или нет. Для безопасности я также добавил класс child-li, так что я не буду использовать загрузочный блок col-xs-offset-1, который может измениться в любое время. Большое спасибо!

Answer 1

Во-первых, (как указано в комментариях), это гораздо проще, если вы указываете, где-то, который является родителем и который является child checkbox. В предоставленном коде это может быть подразумевается, поскольку он выглядит как ребенок. li s имеют класс 'col-xs-offset-1' - , но это класс макета, поэтому не должен использоваться для смыслового значения поскольку макет может измениться.

Таким образом, с текущей HTML, вы можете определить, есть ли флажок родитель или не делать:

var isparent = !$(this).closest("li").is(".col-xs-offset-1"); 

Как уже говорилось выше, мы рекомендуем не делать это - просто работать с тем, что было дано. Вместо этого вы должны добавить классы (в примере ниже «parentCheckbox» и «childCheckbox» были добавлены)

<ul class="col-xs-3"> 
    <li class="checkbox checkbox-info"> 
     <input class='parentCheckbox' id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false"> 
     <label for="1"><b>Faa</b></label> 

    </li> 
    <li class="checkbox checkbox-info col-xs-offset-1"> 
     <input class='childCheckbox' id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false"> 
     <label for="2">Faa1</label> 
    </li> 
</ul> 

затем использовать:

var isparent = $(this).is(".parentCheckbox"); 

(конечно, вам нужно только добавить класс родителям, но это упростит позже для явного указания родителя/ребенка, и вы можете добавить их в li, если это имеет смысл при создании с помощью MVC/Razor).

Затем обрабатывать флажки с родительскими и дочерними элементами в отдельных процедурах.

Когда родитель помечена, обновить все флажки, кроме родителей в соответствии с родителем:

var checked = chk.is(":checked"); 
chk.closest("ul") 
    .find(":checkbox") 
    .not(chk) 
    .prop('checked', checked); 

Когда ребенок тикали, проверьте, если все дочерние флажки галочкой и обновления родителя:

var parent = chk.closest("ul") 
       .find("li:not(.col-xs-offset-1)") 
       .find(":checkbox"); 
var children = chk.closest("ul") 
        .find("li.col-xs-offset-1") 
        .find(":checkbox"); 

if (children.filter(":checked").length == children.length) 
    parent.prop("checked", true); 
else 
    parent.prop("checked", false); 

Вот выше добавлен в ваш HTML jsfiddle: http://jsfiddle.net/3xczqogy/6/

Наконец, выложив HTML для указания родителя/ребенка не как HTML работа s - это может помочь вам разобраться, что происходит, но есть лучшие способы сделать это. (В вопросительном коде «ребенок» (фактически родственный) li s имеют отступы с пробелами и никаким другим тегом/узлом).

Answer 2

Это работает с несколькими уровнями вложенности:

$(document).ready(function(){ 
    $('input[type=checkbox]').on('click', function() { 
     var currentName = $(this).attr("name") 
     var parrentVal = $(this).is(":checked"); 
     var childrenPrefix = currentName.substring(0, currentName.lastIndexOf("IsSelected")); 
     var childrenInputs = $('input[type=checkbox][name^="'+childrenPrefix+'"]') 
     childrenInputs.each(function(){   
      $(this).prop("checked", parrentVal); 
     }) 
     var suffixIndex = currentName.lastIndexOf('.SubsCategories'); 
     if(suffixIndex > -1) 
     { 
      var parntName = currentName.substring(0, suffixIndex); 
      var siblingsAndChildren = $('input[type=checkbox][name^="'+parntName+'.SubsCategories"]') 
      if(siblingsAndChildren.length > 0) 
      { 
       var selectedSiblingsAndChildren = $(siblingsAndChildren).filter(":checked"); 
       $('input[type=checkbox][name="'+parntName+'.IsSelected"]').prop("checked", selectedSiblingsAndChildren.length === siblingsAndChildren.length); 
      } 
     } 

    }) 
}) 

Working fiddle