0

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

<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>

这是我的 JS，用于根据是否选中所有复选框来更改按钮的值，它有效：

$(".commentStatusCheckbox").change(function(){
if ($('.commentStatusCheckbox:checked').length == $('.commentStatusCheckbox').length) {
        $('#checkAllCommentStatusCheckboxes:button').val('uncheck all');
}else{
        $('#checkAllCommentStatusCheckboxes:button').val('check 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);
    })
  })

这就是问题所在：这 2 个 JS 部分不能完美地协同工作，有时会导致按钮显示“取消选中所有”，而应该显示“全部选中”，反之亦然。这发生在我提交表单之后。例如，如果我选中所有 3 个复选框，那么按钮的值正确地“取消选中所有”，但是当我想要它时按下它并不会取消选中所有复选框（我必须按下它两次）。

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

任何帮助是极大的赞赏！

谢谢....

4

1 回答 1

0

我看不到该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();
});
于 2013-06-08T00:59:07.247 回答