1. 首頁
  2. 問答
  3. 檢查/取消選中父複選框，如果所有取消選中/檢查與jQuery更改事件

檢查/取消選中父複選框，如果所有取消選中/檢查與jQuery更改事件

2015-03-18 162 views
0

我有這個樹列表，我檢查所有兒童複選框，如果父母被選中等等，一切都很好，但我有一個問題最後ul 項目03複選框，需要檢查是否所有複選框都選中，然後選中父複選框，反之，如果所有複選框未選中，則取消選中父項檢查，類似於基於所有check/all選中的父複選框取消選中。檢查/取消選中父複選框，如果所有取消選中/檢查與jQuery更改事件

我有一個的jsfiddle http://jsfiddle.net/g40e3nyL/

，這是JS的樣子：

function checks() { 
       $('input[type="checkbox"]').on('change', function(){ 
        var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]'); 

        var count_checked = checkboxes.filter(":checked").length; 
        if (count_checked == 0) { 
         console.log('All checked'); //find parent and uncheck box 
        } else if(count_checked != checkboxes.length) { 
         console.log(''); 
        } else { 
         console.log('all childrens unselected'); //find parent and uncheck box 
        } 

        if ($(this)[0].checked == true) { 
         checkboxes.each(function(){ 
          $(this).prop('checked', true).attr('checked', 'checked'); 
         }); 
        } else { 
         checkboxes.each(function(){ 
          $(this).prop('checked', false).removeAttr('checked'); 
         }); 
        }; 


       }); 
      } checks();

這是HTML標記的樣子：

<ul> 
       <li> 
        item 01<label for=""><input type="checkbox" checked="checked" /></label> 
        <ul> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        item 02<label for=""><input type="checkbox" checked="checked" /></label> 
        <ul> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        item 03<label for=""><input type="checkbox" checked="checked" /></label> 
        <ul> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
         <li> 
          Item 02<label for=""><input type="checkbox" checked="checked" /></label> 
          <ul> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
            <ul> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
             <li> 
              Item 04<label for=""><input type="checkbox" checked="checked" /></label> 
             </li> 
            </ul> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
           <li> 
            Item 03<label for=""><input type="checkbox" checked="checked" /></label> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul>

來源

2015-03-18 user1547007

回答

0

像這樣的事情？

function checks() { 
     $('input[type="checkbox"]').on('change', function(){ 
      var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]'); 
      var siblings = $(this).closest('li').siblings().andSelf(); 
      var siblings_checked_count = siblings.find('> label :checked').size(); 
      var parent_checkbox = $(this).closest('ul').prev().find(':checkbox'); 

      console.log(siblings, siblings_checked_count); 

      var count_checked = checkboxes.filter(":checked").length; 
      if (count_checked == 0) { 
       console.log('All checked'); //find parent and uncheck box 
      } else if(count_checked != checkboxes.length) { 
       console.log(''); 
      } else { 
       console.log('all childrens unselected'); //find parent and uncheck box 
      } 

      if ($(this)[0].checked == true) { 
       checkboxes.each(function(){ 
        $(this).prop('checked', true).attr('checked', 'checked'); 
       }); 
      } else { 
       checkboxes.each(function(){ 
        $(this).prop('checked', false).removeAttr('checked'); 
       }); 
      }; 

      if (!siblings_checked_count) { 
       parent_checkbox.prop('checked', false).removeAttr('checked'); 
      } 
      else if (siblings_checked_count === siblings.size()) { 
       parent_checkbox.prop('checked', true).attr('checked', 'checked'); 
      } 
     }); 
    } 
    checks();

我分叉你的jsfiddle在http://jsfiddle.net/m8sr515L/。

也許不是最優雅的解決方案，但它的工作原理。

來源

2015-03-19 00:38:55

相關問題

 相關問題