input type="checkbox" の二重ブラケットについて

2021-11-29T20:59:12+09:00

WordPress の自作プラグインで挙動不審なところが見付かり、そういえば……と思って input type="checkbox" の二重ブラケットについて調べてみました。

調査した結果としては、自作プラグインのコードの書き方が悪かったので修正しました。

経緯・現象

WordPress の自作プラグインでカスタムタクソノミーをチェックボックスで選択できる設定画面を作ってあったのですが、そこにチェックを入れてもデータが保存されない現象に遭遇。

コード

c          = $c;
        $this->hidden_ids = $arrayTaxonomies['id'];
    }

    /**
     * Start the element output.
     *
     * @see Walker::start_el()
     *
     * @since 2.5.1
     *
     * @param string $output   Used to append additional content (passed by reference).
     * @param object $category The current term object.
     * @param int    $depth    Depth of the term in reference to parents. Default 0.
     * @param array  $args     An array of arguments. @see wp_terms_checklist()
     * @param int    $id       ID of the current term.
     */
    function start_el(
        &$output,
        $category,
        $depth = 0,
        $args = Array(),
        $id = 0
    )
    {
        extract( $args );
        if( empty( $taxonomy )) {
            $taxonomy = 'category';
        }

        if( $taxonomy == 'category' ) {
            $name = 'post_category';
        }
        else {
            $name = 'tax_input[' . $taxonomy . ']';
        }

        $class = in_array( $category->term_id, $popular_cats ) ? ' class="popular-category"' : '';

        // 処理
        $id = esc_attr( $name ) . '___term---' . esc_attr( $category->term_id );
        $nameAttr = "name=\"{$i( 'myplugin_checkboxes' )}[{$id}]\"";
        // 処理
    }
}

設定画面は WordPress の Walker_Category_Checklist を継承したクラスで、チェックボックスの設定画面を作成していました。

特に今回気になったのは次の部分。

    else {
        $name = 'tax_input[' . $taxonomy . ']';
    }

もう一つ。

    $id = esc_attr( $name ) . '___term---' . esc_attr( $category->term_id );
    $nameAttr = "name=\"{$i( 'myplugin_checkboxes' )}[{$id}]\"";

デフォルトのカテゴリーならば post_category という文字列を付与していますが、カスタムタクソノミーの場合は tax_input[TAXONOMY_NAME] とブラケットを使ってオブジェクトの記述にしていました。これをチェックボックスの name 属性に使用しています。その際に、複数選択可能なチェックボックスなのでさらに外側にブラケットが付くようにしていました。

name="myplugin_checkboxes[tax_input[TAXONOMY_NAME]___term---TERMID]"

こんな感じですね。ところが、このチェックボックスにチェックを入れても反映されない、となったわけです。

いかにも二重にブラケットで括っているのが挙動不審の原因になっていそうな気がしたので、調査しました。

調査

a:XX:{s:26:"post_category___term---154";i:1;s:26:"post_category___term---165";i:1;s:26: /* 略 */ i:1;s:32:"tax_input[TAXONOMY_NAME";i:1;}

データベースで該当するキーを確認すると……やはり、二重ブラケットになった値を入れるところでシリアライズされたデータのフォーマットが崩れています。

検証

そこで簡単なコードを作成。

二重ブラケットのチェックボックスを用意して POST するだけの簡単なフォームです。




    
    
    
    result

テストなのでエスケープとか一切していないですが、これで出力を確認。

array (size=1)
  'input' => 
    array (size=1)
      'hoge[fuga' => string '1' (length=1)

思った通り、二重ブラケットのキーが途中で壊れてしまっています。 DB の中でシリアライズが崩れたデータと同じ状態です。

これで二重ブラケットがNGであることが分かったのでコードを修正します。

修正

    else {
//        $name = 'tax_input[' . $taxonomy . ']';
        $name = $taxonomy;
    }

今回は独自のパース処理でタームのチェックを判断しているので、 tax_input の配列名は不要でした。そこで、タクソノミー名をそのまま $name に渡すように修正を加えました。

    $id = esc_attr( $name ) . '___term---' . esc_attr( $category->term_id );
    $nameAttr = "name=\"{$i( 'myplugin_checkboxes' )}[{$id}]\"";

それを使ってチェックボックスを出力する部分や他の部分は一切触らず。これで動作OKを確認しました。

参考

Walker_Category_Checklist | Class | WordPress Developer Resources

【VB.NET】データグリッドビューで行毎のチェックボックスにイベントを仕込む

2019-09-13T09:40:08+09:00

今回は、データグリッドに配置したチェックボックス列にイベントを仕込みたいと思います。

プログラムは前回のものを流用。
【VB.NET】データグリッドビューで行毎のコンボボックスにイベントを仕込む

プログラムの修正

新規イベントの追加

データグリッドビューの現在のセル状態が変更された際のイベントを追加します。

Form1.vb

    ''' 
    ''' データグリッドビューの現在のセル状態が変更された際のイベント
    ''' 
    ''' 
    ''' 
    Private Sub dgv_CurrentCellDirtyStateChanged(sender As Object, e As EventArgs) Handles dgv.CurrentCellDirtyStateChanged
        ' 対象のセルを判定
        If dgv.CurrentCellAddress.X = 0 AndAlso dgv.IsCurrentCellDirty Then
            ' 変更を確定する
            dgv.CommitEdit(DataGridViewDataErrorContexts.Commit)
        End If
    End Sub

データグリッドビューのセル値が変更された際のイベントを追加

Form1.vb

    ''' 
    ''' データグリッドビューのセル値が変更（が確定）された際のイベント
    ''' 
    ''' 
    ''' 
    Private Sub dgv_CellValueChanged(sender As Object, e As DataGridViewCellEventArgs) Handles dgv.CellValueChanged

        If (TypeOf dgv(e.ColumnIndex, e.RowIndex) Is DataGridViewCheckBoxCell) Then
            Dim chk As DataGridViewCheckBoxCell = dgv(e.ColumnIndex, e.RowIndex)
            MessageBox.Show(e.RowIndex + 1 & "行目のチェックボックス値：" & chk.Value)
        End If

    End Sub

データグリッドビューのセルがクリック（マウスダウン）された際のイベントを追加

Form1.vb

    ''' 
    ''' データグリッドビューのセルをクリック（マウスダウン）した際のイベント
    ''' 
    ''' 
    ''' 
    Private Sub dgv_CellMouseDown(sender As Object, e As DataGridViewCellMouseEventArgs) Handles dgv.CellMouseDown
        If (TypeOf dgv(e.ColumnIndex, e.RowIndex) Is DataGridViewCheckBoxCell) Then
            Dim cell As DataGridViewCheckBoxCell = dgv(e.ColumnIndex, e.RowIndex)
            cell.Value = If(cell.Value = False, True, False)
            ' 変更を確定する
            dgv.CommitEdit(DataGridViewDataErrorContexts.Commit)
            dgv.EndEdit()
        End If
    End Sub

起動してみる

無事に処理できましたね。

まとめ

次回は、チェックされた行の背景色を変更してみたいと思います。

【VB.NET】データグリッドビューでチェックされた行の背景色を変更する

ではでは。

「CheckBox」の記事 - Crieit

input type="checkbox" の二重ブラケットについて

【VB.NET】データグリッドビューで行毎のチェックボックスにイベントを仕込む