On Change Event on working in jQuery

Question

When I click on the single checkbox, it changes and green colored. But when I check Full day, all checkboxes are checked but color not change. also after checking full Day, I uncheck all times still full day is checked. I'm stuck, what wrong with this code?

 $(document).ready(function() { $('input:checkbox[name="time"]').change(function() { $('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active"); $('input:checkbox[name="time"]:checked').parent().addClass("active"); }); }); function selectAll(source) { checkboxes = document.getElementsByName('time'); for (var i in checkboxes) checkboxes[i].checked = source.checked; } 

 .timing { width: 500px; } .timing label { width: 100px; display: inline-block; border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; } .timing label input { display: block; } .timing label.active { background-color: rgba(0, 204, 0, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timing"> <label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label> <label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label> <label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label> </div> <label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label> <script> function selectAll(source) { checkboxes = document.getElementsByName('time'); for (var i in checkboxes) checkboxes[i].checked = source.checked; } </script> 

Answer 1

The issue is because you need to trigger a change event on the checkboxes when clicking the 'Select All' option so that their own event handler runs and changes their background colour. This does not occur when setting the checked state manually, so you can use the trigger() method in your code.

You should note though, that you can improve your logic by using toggleClass() and also removing the on* event attribute as they are outdated. Use an unobtrusive event handler as you do for the normal checkboxes. Try this:

 $('input:checkbox[name="time"]').change(function() { $(this).closest('label').toggleClass('active', this.checked); }); $('#selectall').change(function() { $('input:checkbox[name="time"]').prop('checked', this.checked).trigger('change'); }); 

 .timing { width: 500px; } .timing label { width: 100px; display: inline-block; border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; } .timing label input { display: block; } .timing label.active { background-color: rgba(0, 204, 0, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timing"> <label for="11:30"> <input name="time" class="timess" value="11:30" id="11:30" type="checkbox"> 11:30 </label> <label for="12:00"> <input name="time" class="timess" value="12:00" id="12:00" type="checkbox"> 12:00 </label> <label for="12:30"> <input name="time" class="timess" value="12:30" id="12:30" type="checkbox"> 12:30 </label> </div> <label for="selectall"> <input type="checkbox" id="selectall" /> Full Day </label> 

Answer 2

I added trigger event. Change event will not get fired if you check checkbox using JS.

function selectAll(source) {
    checkboxes = document.getElementsByName('time');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
        $('input:checkbox[name="time"]').trigger('change');//Trigger change event to checkbox
}

 $(document).ready(function () { $('input:checkbox[name="time"]').change(function () { $('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active"); $('input:checkbox[name="time"]:checked').parent().addClass("active"); }); }); function selectAll(source) { checkboxes = document.getElementsByName('time'); for(var i in checkboxes) checkboxes[i].checked = source.checked; $('input:checkbox[name="time"]').trigger('change') } 

 .timing{width:500px;} .timing label{width:100px;display:inline-block;border:1px solid #ccc;padding:10px;text-align:center;cursor:pointer;} .timing label input{display:block;} .timing label.active{background-color:rgba(0,204,0,1);} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timing"> <label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label> <label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label> <label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label> </div> <label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label> <script> function selectAll(source) { checkboxes = document.getElementsByName('time'); for(var i in checkboxes) checkboxes[i].checked = source.checked; } </script> 

Answer 3

You need to trigger the change function inside the loop

 $(document).ready(function() { $('input:checkbox[name="time"]').change(function() { $('input:checkbox[name="time"]').parent().removeClass("active"); $('input:checkbox[name="time"]:checked').parent().addClass("active"); }); }); function selectAll(source) { checkboxes = document.getElementsByName('time'); for (var i in checkboxes){ checkboxes[i].checked = source.checked; $('input:checkbox[name="time"]').trigger('change') } } 

 .timing { width: 500px; } .timing label { width: 100px; display: inline-block; border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; } .timing label input { display: block; } .timing label.active { background-color: rgba(0, 204, 0, 1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="timing"> <label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label> <label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label> <label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label> </div> <label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label>