jquery check all / uncheck all toggle button not dynamically changing value after php post of form

Question

I have been trying to get a button that toggles its value (from "check all" to "uncheck all") based on if all the checkboxes of a certain class are checked or not. Here is my HTML (well, PHP) of the simple form with checkboxes, you can see I'm checking with isset for retaining checked state after sending the form (the "Refresh" button):

<form id="contactFormFilters" name="contactFormFilters" class="form-horizontal" action="" method="post">
<label class="checkbox"><input type="checkbox" name="commentStatusCheckbox[]" class="commentStatusCheckbox" value="inbox" <?php if(isset($_POST['commentStatusCheckbox']) && is_array($_POST['commentStatusCheckbox']) && in_array('inbox', $_POST['commentStatusCheckbox'])) echo 'checked="checked"'; ?> />Inbox</label>
<label class="checkbox"><input type="checkbox" name="commentStatusCheckbox[]" class="commentStatusCheckbox" value="archive" <?php if(isset($_POST['commentStatusCheckbox']) && is_array($_POST['commentStatusCheckbox']) && in_array('archive', $_POST['commentStatusCheckbox'])) echo 'checked="checked"'; ?> />Archive</label>
<label class="checkbox"><input type="checkbox" name="commentStatusCheckbox[]" class="commentStatusCheckbox" value="trash" <?php if(isset($_POST['commentStatusCheckbox']) && is_array($_POST['commentStatusCheckbox']) && in_array('trash', $_POST['commentStatusCheckbox'])) echo 'checked="checked"'; ?> />Trash</label>
<input type="button" class="btn btn-success btn-mini" value="check all" id="checkAllCommentStatusCheckboxes" /><br /><br />
<button name="compares">Refresh</button>
</form>

Here is my JS for changing the value of the button based on if all the checkboxes are checked, which works:

$(".commentStatusCheckbox").change(function(){
if ($('.commentStatusCheckbox:checked').length == $('.commentStatusCheckbox').length) {
        $('#checkAllCommentStatusCheckboxes:button').val('uncheck all');
}else{
        $('#checkAllCommentStatusCheckboxes:button').val('check all');
}});

Here is my JS for toggling the check all / uncheck all button, I am using a toggle class ("toggleClick") I found on StackOverflow since jQuery 1.9.1 was giving me trouble with using toggle with changing the value of the button. This snippet works also:

   $.fn.toggleClick = function(){
    var methods = arguments,
    count = methods.length;
    return this.each(function(i, item){
        var index = 0;
        $(item).click(function(){
            return methods[index++ % count].apply(this,arguments);
           });
  });
 };
 $(function(){
 $('#checkAllCommentStatusCheckboxes:button').toggleClick(function(){
    $(this).val('uncheck all');
    $('input.commentStatusCheckbox[type=checkbox]').prop('checked',true);
  },function(){
    $(this).val('check all');
    $('input.commentStatusCheckbox[type=checkbox]').prop('checked',false);
    })
  })

Here is the problem: The 2 JS parts do not work perfectly together, sometimes resulting in the button saying "uncheck all" when it should say "check all" and vice versa. This happens after I submit the form. For example, if I check all 3 checkboxes, then the button's value is correctly "uncheck all", but pressing it does not uncheck all checkboxes when I want it to (I have to press it twice).

I am not sure if I need to do some sort of PHP if/else with the value of the button in the form? Or, intergrate (or redo) these JS sections?

Any help is greatly appreciated!

thanks....

Answer 1

I don't see how the toggleClick function behaves as you want since you do not want it to necessarily toggle with each click. I think you also need to make sure the button is in the correct state when the page loads. I recommend writing a function that updates the button to the correct state. This function would be called (1) when the page loads, (2) when a checkbox is changed, and (3) when the button is clicked.

Instead of using toggleClick(), I recommend setting a .data() value on the button to determine what it does when it is clicked.

Here is what the JavaScript would look like:

$(function() {
    // This function sets the button to the correct state.
    function updateCheckAllButton() {
        if ($('.commentStatusCheckbox:checked').length == $('.commentStatusCheckbox').length) {
            $('#checkAllCommentStatusCheckboxes').val('uncheck all').data('check', false);
        } else {
            $('#checkAllCommentStatusCheckboxes').val('check all').data('check', true);
        }
    }

    // Whenever a checkbox is changed, the button is updated to the correct state.
    $('.commentStatusCheckbox').change(function() {
        updateCheckAllButton();
    });

    // Handle the button click. This will check or uncheck the checkboxes, and
    // then update the state of the button.
    $('#checkAllCommentStatusCheckboxes').click(function() {
        $('.commentStatusCheckbox').prop('checked', $(this).data('check'));
        updateCheckAllButton();
    });

    // Make sure the button is initially in the correct state.
    updateCheckAllButton();
});