JQuery Выбрать Checkbox - Выбрать все

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. Слушайте события изменения на .task-input
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 = р

Answer 3

Как и в случае с Caio Vianna, просто отличное, если и предназначено для правильного списка. Также добавлен снятие контрольного списка, если больше не выполняются проверенные задачи.Я уверен, что вы можете оптимизировать селекторы, хотя, в любом случае должно быть полезным

$('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.