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

jQuery 1.9.1でボタンの値を変更してトグルを使用すると問題が発生したため、StackOverflowで見つけたトグルクラス（「toggleClick」）を使用しています。このスニペットも機能します。

   $.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 つのチェックボックスをすべてオンにすると、ボタンの値は正しく「すべてオフ」になりますが、ボタンを押してもすべてのチェックボックスがオフになるわけではありません (2 回押す必要があります)。

フォーム内のボタンの値を使用して 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 に答える