mardi 1 novembre 2016

Trouble with jquery check all checkboxes

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




Aucun commentaire:

Enregistrer un commentaire