札幌Web制作のシンクグラフィカ

入力欄の分岐処理(v4.2.2~)

入力欄・入力フィールドをチェックされた内容に応じて様々に分岐処理をしたい!というあなたの期待に応えるための機能です。

最も一般的な例でいえばselectやradio、checkboxなどでその他を選んだ場合にその他を入力するフィールドが表示または有効になるという用途ですね。

本機能を利用する場合、config.cgiの

#push @AddOns,'toggle.js';

の行頭のシャープを外し、HTMLに以下のような指定を行います。

<input type=”radio” name=”職業” value=”その他” data-toggle=”other_job”>
<div id=”other_job”>
<input type=”text” name=”職業(その他)”>
</div>

このようにdata-toggle属性を指定し、そこにチェックされた場合に有効にする入力欄が格納されたオブジェクトのIDを指定します。radioやcheckboxの場合は該当エレメントがチェックされた際に、入力欄が有効になります。

その他、data-toggle-hideを指定することで、チェックされていない場合は自動的に隠れます。
selectタグで利用する場合はdata-toggle-valueに該当選択肢のvalueを入れることで、valueが合致した場合に有効になります。詳細はサンプルファイルをご参照ください。