jquery check all/uncheck all toggle按钮在php发布表单后不动态更改值

我一直在尝试获取一个按钮，根据是否选中某个类的所有复选框来切换其值（从“全部选中”到“全部取消选中”）。这是我的带有复选框的简单表单的HTML（好吧，PHP），您可以看到我正在使用isset检查发送表单后是否保留选中状态（“刷新”按钮）：

这是我用来切换check all/uncheck all按钮的JS，我使用的是在StackOverflow上找到的一个切换类（“toggleClick”），因为jQuery 1.9.1在使用切换更改按钮值时给我带来了麻烦。此代码段也适用于：

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

问题是：两个JS部件不能完美地协同工作，有时会导致按钮在应该说“全部检查”时说“全部取消检查”，反之亦然。这发生在我提交表单之后。例如，如果我选中了所有3个复选框，则按钮的值正确地为“全部取消选中”，但如果我想取消选中所有复选框，则按下它不会取消选中所有复选框（我必须按下它两次）

我不确定是否需要对表单中按钮的值执行某种PHP if/else？或者，整合（或重做）这些JS部分

非常感谢您的帮助

---

谢谢……

我看不出

toggleClick

函数的行为是否符合您的要求，因为您不希望它在每次单击时都进行切换。我认为您还需要确保页面加载时按钮处于正确状态。我建议编写一个函数，将按钮更新到正确的状态。此函数将在（1）加载页面时调用，（2）更改复选框时调用，（3）单击按钮时调用

我建议不要使用

toggleClick（）

，而是在按钮上设置一个

.data（）

值，以确定单击按钮时的操作

下面是JavaScript的外观：

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

---

非常感谢你，这对于我所设想的工作方式来说绝对是完美的！！我从你的回答中学到了很多，非常感谢：-）

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

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