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。