JSFiddle - React, Tailwind, and code Playground

by Vaibhav Katole

HTML

<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">
                     ...

JavaScript

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

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