jQuery Select Checkbox - Select All

Question

I have the following Checklist and Tasks Structure

enter image description here

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

when i check a task the second level checkbox. i want it to check the first level one if its not checked. — Harsha M V
– Harsha M V, Commented Oct 18, 2014 at 5:37

Master Slave · Accepted Answer · 2014-10-18 06:23:46Z

2

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);
        }
    }
})

answered Oct 18, 2014 at 6:23

Master Slave

28.6k4 gold badges61 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Terry · Accepted Answer · 2014-10-18 06:20:31Z

1

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

Listen to the change event on .task-input
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/

answered Oct 18, 2014 at 6:20

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Comments

Caio Vianna Lima Netto · Accepted Answer · 2014-10-18 05:31:03Z

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

dashtinejad · Accepted Answer · 2014-10-18 06:47:59Z

You should take control in two steps:

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);
});

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.

Collectives™ on Stack Overflow

jQuery Select Checkbox - Select All

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related