選中/取消選中MVC中的所有CheckboxFor

Question

作爲我之前處理MV​​C中的複選框的question的延續。我一直在做這樣的this這個question，但它似乎不工作，因爲MVC的CheckBoxFor創建的隱藏字段。任何想法爲什麼？這裏是我的fiddle顯示實際HTML代碼CheckboxFor

我的實際HTML：

<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

首先，（在評論中指出），它是在您指定的地方這是一個家長更容易，這是一個孩子複選框。在提供的代碼中，這可以被隱含，因爲它看起來像兒童li s有class'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"); 

（當然，你只需要添加一個類父母，但稍後可以明確指出父母/孩子，如果在使用MVC/Razor構建時更有意義，可以將它們添加到li）。

然後在單獨的例程中處理父和子複選框。

當父被選中，更新所有的複選框，除了家長來匹配父：

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