jQuery Select Checkbox - Select All

Question

I have the following Checklist and Tasks Structure

Now i want if any one checks a Task i want to make sure the the Checklist also gets checked. When someone unchecks the checklist all the tasks should get unchecked.

<!-- 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 Code:

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

Answer 1

Similar to Caio Vianna, just a different if, and targeting the proper list. Also added the unchecking of checklist if there's no longer any checked tasks. I'm sure you can optimize the selectors though, anyways should be helpful

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

Your code will check everything (or not) as the master checklist is toggled (alas, when you check it, it will check everything inside, and vice versa).

You want to test that first so ...

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

That will only UNCHECK, since it only runs if you unchecked the master checklist. As for the rest

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

Will check the master checklist only if you checked a sibling

Note: my jquery selector skills are rusty, so I might made some mistake there, but I guess the logic of the thing isclear =p

Answer 3

I believe you are lacking the function that does the following logic:

1. Listen to the change event on .task-input
2. Determine if the length of checked items of grouped .task-input elements exceeds 0
   • If it exceeds zero, check the group's own .checklist-input
   • If not, uncheck the group's own .checklist-input

And here is the missing function:

$('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);
});

Proof-of-concept fiddle: http://jsfiddle.net/teddyrised/1cy47tga/1/

Answer 4

You should take control in two steps:

1. For the main level checklist button:

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

2. For the second level checkboxes:

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