Check All/Uncheck All using jquery

Question

I have this markup from a cakephp generated ctp file.

This Is basically a checkbox group with hobbies.

So, I want to check all/uncheck all using jquery and after all have been checked if I uncheck a single box ,check all will be removed and so if I check all individual check boxes check all box will be automatically checked.

My code:

<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="checkAll" id="StudentHobbyCheckAll" />
  <label for="StudentHobbyCheckAll">Check All/Uncheck All</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="sports" id="StudentHobbySports" />
  <label for="StudentHobbySports">Sports</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="movies" id="StudentHobbyMovies" />
  <label for="StudentHobbyMovies">Movies</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="netsurfing" id="StudentHobbyNetsurfing" />
  <label for="StudentHobbyNetsurfing">Netsurfing</label>
</div>
<div class="checkgroup">
  <input type="checkbox" name="data[Student][hobby][]" value="photography" id="StudentHobbyPhotography" />
  <label for="StudentHobbyPhotography">Photography</label>
</div>

I don't see any javascript here, although this is a current feature. Did you search before asking this question? If so on what did you encounter difficulties? — dotpush, Dec 13 '14 at 20:48
look at: http://stackoverflow.com/questions/9669005/jquery-toggle-select-all-checkboxes http://stackoverflow.com/questions/17457818/in-jquery-how-do-you-check-and-uncheck-all-checkboxes-using-an-element http://stackoverflow.com/questions/19569510/jquery-checkbox-how-to-check-or-uncheck-all-checkboxes-when-another-checkbox-is — Alex Kulinkovich, Dec 13 '14 at 20:52
@chinmaya-panigrahi check the edit, and also the updated codepen — Todd, Dec 13 '14 at 21:28
Please guys, stop using the CakePHP tag for questions that don't even have *anything* to do with php at all! — floriank, Dec 14 '14 at 12:13

score 2 · Accepted Answer · edited Dec 14 '14 at 16:35

http://jsfiddle.net/d5b01jdd/

var $chAll = $('#StudentHobbyCheckAll');
var $ch=$('.checkgroup input[type="checkbox"]').not($chAll);

$chAll.click(function () {
    $ch.prop('checked', $(this).prop('checked'));
});

$ch.click(function(){
    if($ch.size()==$('.checkgroup input[type="checkbox"]:checked').not($chAll).size())
        $chAll.prop('checked',true);
    else
        $chAll.prop('checked',false);
});

Todd · Answer 2 · 2014-12-13T21:21:00.783

1

This should work. CODEPEN

$(function(){
  $('#StudentHobbyCheckAll').on('change', function() {
    $(this)
      .parents(':not(> :checkbox)')
      .find(':checkbox:gt(0)')
      .prop('checked', !$(this)[0].checked);
  }).change();
});

edited Dec 13 '14 at 21:21

answered Dec 13 '14 at 20:48

Todd

5,314
3
28
45

1

"so if i check all individual check boxes check all box will be automatically checked"? (although hard to notice) – dotpush Dec 13 '14 at 20:50
@Todd ..I tried your code ..but it isn't working.The id of select all check box is 'StudentHobbyCheckAll'.how should it will work on the value of select all check box.My requirement is 1.when i celect selectall check box ,all will be selected. 2.with all boxes selected,if i uncheck a check box ,the selectAll check box have to be removed 3.if i select the rest 4 check boxes,the top one will automatically will be selected.It is hard to do because all check boxes are in a separate Div. – Ranjit Panigrahi Dec 13 '14 at 21:06
My requirement is 1.when i celect selectall check box ,all will be selected. 2.with all boxes selected,if i uncheck a check box ,the selectAll check box have to be removed 3.if i select the rest 4 check boxes,the top one will automatically will be selected.It is hard to do because all check boxes are in a separate Div.@dotpush – Ranjit Panigrahi Dec 13 '14 at 21:18

Check All/Uncheck All using jquery

2 Answers2