jQuery的選擇複選框 - 選擇全部

Question

我有以下清單和任務結構

現在我想，如果任何一個檢查任務，我想，以確保該清單也被檢查。 當有人取消選中清單時，所有任務都應該取消選中。

<!-- Checklist --> 
       <div class="checklist"> 
       <div class="media"> 
        <div class="pull-left checklist-checkbox"> 
        <input class="checklist-input" name="checklist" type="checkbox" value=""> 
        </div> 
        <div class="media-body task-list"> 
        <h4 class="media-heading">This is a CheckList</h4> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Book your venue.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div> 
        </div> 
        <div class="add-task"><a href="#">Add Task</a></div> 
        <div class="form-add-task"> 
         <form action="addtask.php" method="post"> 
         <input type="text" class="form-control task-input"> 
         <input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task"> 
         </form> 
        </div> 
        </div> 
       </div> 
       </div> 
       <div class="checklist"> 
       <div class="media"> 
        <div class="pull-left checklist-checkbox"> 
        <input class="checklist-input" name="checklist" type="checkbox" value=""> 
        </div> 
        <div class="media-body task-list"> 
        <h4 class="media-heading">This is a CheckList</h4> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Book your venue.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div> 
        </div> 
        <div class="media tasks"> 
         <div class="pull-left task-checkbox"> 
         <input class="task-input" name="task" type="checkbox" value=""> 
         </div> 
         <div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div> 
        </div> 
        <div class="add-task"><a href="#">Add Task</a></div> 
        <div class="form-add-task"> 
         <form action="addtask.php" method="post"> 
         <input type="text" class="form-control task-input"> 
         <input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task"> 
         </form> 
        </div> 
        </div> 
       </div> 
       </div> 
       <!--/Checklist --> 

jQuery代碼：

$('input.checklist-input').on('change',function(){ 
    $(this).parent().siblings('.task-list').find('input.task-input').prop('checked',$(this).prop('checked')); 
}) 

Answer 1

我相信你所缺乏的，做以下邏輯功能：

1. 聽取了關於更改事件3210
2. 確定是否分組.task-input元素的檢查項目的長度超過0
   • 如果超過零，檢查組自己.checklist-input
   • 否則，取消該組自己.checklist-input

這裏是缺少的功能：

$('input.task-input').on('change', function() { 
    var tasks = $(this).closest('.task-list').find('input.task-input:checked').length; 
    $(this).closest('.checklist').find('input.checklist-input').prop('checked',tasks); 
}); 

概念證明小提琴：http://jsfiddle.net/teddyrised/1cy47tga/1/

Answer 2

您的代碼將檢查一切（或沒有）作爲主檢查清單被切換（唉，當你選擇了它，它會檢查其內部的一切，反之亦然） 。

你想測試第一所以......

$('input.checklist-input').on('change',function(){ 
    if (!$(this).prop('checked')) 
     $(this).parent().siblings('.task-list').find('input.task-input').prop('checked',false); 
}) 

只會取消選中，因爲它只有在你未選中主檢查清單運行。 至於其他

$(input.task-input').on('change',function() { 
    if ($(this).prop('checked')) 
     $('input.checklist-input').prop('checked',true); 
}) 

將檢查主檢查清單隻有當你選中一個兄弟

注：我的jQuery選擇技能生疏，所以我可能弄錯了，但我猜的邏輯事情isclear = p

Answer 3

與Caio Vianna類似，只是一個不同的if，並且定位正確的列表。如果不再有任何已檢查的任務，還添加了未選中清單的清單。我敢肯定，你雖然可以優化選擇，反正應該是有幫助

$('input.task-input').on('change', function() { 
    if ($(this).prop('checked') === true) { 
     $(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', true); 
    } else { 
     var checked = $(this).closest('div.task-list').find('input.task-input:checked').length; 
     if (checked === 0) { 
      $(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', false); 
     } 
    } 
}) 

Answer 4

你應該控制在兩個步驟：

1. 對於主級清單按鈕：

   $('body').on('change', '.checklist-input', function() { 
       var checked = $(this).prop('checked'); 
       $(this).closest('.checklist').find('.task-input:checkbox').prop('checked', checked); 
   }); 
   

2. 對於二級複選框：

   $('body').on('change', '.task-input:checkbox', function() { 
       var checkedArray = []; 
       var $checkboxes = $(this).closest('.checklist').find('.task-input:checkbox'); 
   
       $checkboxes.each(function() { 
        var checked = $(this).prop('checked'); 
        if (checked) { 
         checkedArray.push(checked); 
        } 
       }); 
   
       var totalChecked = false; 
       if (checkedArray.length == $checkboxes.length) { 
        totalChecked = true; 
       } 
   
       $(this).closest('.checklist').find('.checklist-input').prop('checked', totalChecked); 
   }); 
   

JSFiddle Demo。