こんにちわ。なおとです。

XOOPSでjQueryを使うとき、XOOPSのSmartyプラグインとの組み合わせで、ちょっとしたノウハウをご紹介します。

jQueryでセレクタを使うときに（もちろん）idを指定することができます。 そのとき、操作対象の要素のid属性の値に使われる文字種には、注意する必要があります。

大雑把に言うと、特にcssセレクタとして使う場合も考慮するなら、できれば英数字と-（ハイフン）だけの組み合わせを使うのが、一番無難です。

（参考：名前付けの注意点 『The Web KANZAKI ごく簡単なHTMLの説明』より）

jQueryの話に戻りますが、idに「[]（大括弧）」が含まれていると、idセレクタでその要素を「掴む」ことができません。

しかし、XOOPSのSmartyプラグイン「xoops_input」を使うと、いくつかの条件が重なると、idに[]を含む文字列が入ります。 これはハマりどころで、私もこの現象に気づくまで、かなり悩みました。

その問題の条件は、name属性の値に[]を使っていて、php側では配列で値を受け取れるようにしていることと、自動でidをつける（明示的に指定しなければそうなる）ようにしている時、という条件が重なった場合です。

（参考：xoops_input『SourceForge.net: xoopscube » Legacy_Theme_Smarty;ja』より）

テンプレート
<{xoops_input type=checkbox name="checkbox[]" value="value1" default=$value}>
<{xoops_input type=checkbox name="checkbox[]" value="value2" default=$value}>
<{xoops_input type=checkbox name="checkbox[]" value="value3" default=$value}>
↓
出力
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value1" value="value1" type="checkbox">
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value2" value="value2" type="checkbox">
<input name="checkbox[]" id="legacy_xoopsform_checkbox[]_value3" value="value3" type="checkbox">

この場合には、明示的にidを指定することによってidの値をある程度コントロールできるので、それで解決できます。

テンプレート
<{xoops_input type=checkbox name="checkbox[]" value="value1" default=$value id="checkboxvalue1"}>
<{xoops_input type=checkbox name="checkbox[]" value="value2" default=$value id="checkboxvalue2"}>
<{xoops_input type=checkbox name="checkbox[]" value="value3" default=$value id="checkboxvalue3"}>
↓
出力
<input name="checkbox[]" id="checkboxvalue1_value1" value="value1" type="checkbox">
<input name="checkbox[]" id="checkboxvalue2_value2" value="value2" type="checkbox">
<input name="checkbox[]" id="checkboxvalue3_value3" value="value3" type="checkbox">

これでうまく要素を掴めるようになります。