0

So, if I hit the check all, they all get checked. what I am trying to do, is if you uncheck one of them the "All" checkbox gets unchecked, and if you check all the list, the "All" get's checked.

I'm missing something with how it's interacting with the dom. Please help!

HTML Code

<input id="select_all" class="allCategories" name="Category code" type="checkbox" value="All" /> All
<p class="h4">Benefits to the community and other categories</p>
<div class="checkbox"><label for="53"><input id="53" class="all" name="Category code: benefits" type="checkbox" value="53" /> Community - charitable corporations (53)</label><br />
<label for="55"><input id="55" class="all" name="Category code: benefits" type="checkbox" value="55" /> Community - charitable trusts (Other than service clubs and fraternal societies projects) (55)</label><br />
<label for="59"><input id="59" class="all" name="Category code: benefits" type="checkbox" value="59" /> Community organizations - not elsewhere classified (59)</label><br />
<label for="83"><input id="83" class="all" name="Category code: benefits" type="checkbox" value="83" /> Corporation funding registered Canadian amateur athletic associations (83)</label><br />
<label for="75"><input id="75" class="all" name="Category code: benefits" type="checkbox" value="75" /> Employees' charity trusts (75)</label><br />
<label for="50"><input id="50" class="all" name="Category code: benefits" type="checkbox" value="50" /> Libraries, museums and other repositories (50)</label><br />
<label for="51"><input id="51" class="all" name="Category code: benefits" type="checkbox" value="51" /> Military units (51)</label><br />
<label for="99"><input id="99" class="all" name="Category code: benefits" type="checkbox" value="99" /> Miscellaneous charitable organizations - not elsewhere classified (99)</label> <label for="52"> <input id="52" class="all" name="Category code: benefits" type="checkbox" value="52" /> Preservation of sites, beauty and historical (52)</label><br />
</div>

Jquery code

$(document).ready(function(){

//select all checkboxes
$("#select_all").change(function(){  //"select all" change
    $(".all").prop('checked', $(this).prop("checked")); //change all ".all" checked status
});

//".all" change
$('input:checkbox.all').change(function(){
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if(false == $(this).prop("checked")){ //if this item is unchecked
        $("#select_all").prop('checked', false); //change "select all" checked status to false
    }
    //check "select all" if all checkbox items are checked
    if ($('.all:checked').length == $('.all').length ){
        $("#select_all").prop('checked', true);
    }
});
});
JonYork
  • 1,223
  • 8
  • 31
  • 52
  • 1
    There are literally dozens of examples of this online and even on this site. Is there something in the answers to those questions you don't understand? – Heretic Monkey Nov 01 '16 at 15:01
  • Yes, if I take one of the .all checkboxes outside of the div and label, it works as intented. However, inside the div and label it the .all change function doesn't work. how do i get it to work inside of the div and label? – JonYork Nov 01 '16 at 15:03
  • There is full answer to this question on [Jquery Checkbox check all](http://stackoverflow.com/a/25697142/215552). – Heretic Monkey Nov 01 '16 at 15:06
  • Yes, that's where I got the idea from. But how come it work work if my checkboxes are within a div and a label? – JonYork Nov 01 '16 at 15:11
  • [Works here](https://jsfiddle.net/6k67bgqc/). – Heretic Monkey Nov 01 '16 at 15:13
  • ah crud. might be some functionality my organization ripped out of jquery then. :( Wish I had access to JSFiddle at work :( – JonYork Nov 01 '16 at 15:15
  • In the future, you can look at Stack Snippets, which can be accessed by clicking the icon looking like a page with angle brackets on it `<>`. It's like jsFiddle, but all within the Stack Overflow domains, and is therefore less likely to be blocked. – Heretic Monkey Nov 01 '16 at 15:19

0 Answers0