JavaScriptを利用すれば、ブラウザ上での操作に対しリロードを挟まずリアルタイムに表示を変更する事ができます。
これを使いフォームのボタンを無効にしたり、逆に有効にしたりします。
一つのチェックボックスのON/OFFで他のチェックボックスの有効と無効を切り替える
<script type="text/javascript">
function connecttext( id, ischecked )
{
if(ischecked==false)
{
document.getElementById( "state20" ).disabled=1;
document.getElementById( "state21" ).disabled=1;
document.getElementById( "state22" ).disabled=1;
document.getElementById( "state23" ).disabled=1;
document.getElementById( "state24" ).disabled=1;
document.getElementById( "state25" ).disabled=1;
}
else
{
document.getElementById( "state20" ).disabled=0;
document.getElementById( "state21" ).disabled=0;
document.getElementById( "state22" ).disabled=0;
document.getElementById( "state23" ).disabled=0;
document.getElementById( "state24" ).disabled=0;
document.getElementById( "state25" ).disabled=0;
}
}
</script>
javascriptはラジオボタンがクリックされたら反抗するように設定しています。
ischeckedにはチェック状態が入るので、これで判定しIDがstate20～state25のチェックボックスを有効と無効を切り替えます。
<form name="FORMs" method="get">
<input type="checkbox" name="state03" id="urlinput5" value="1" checked="checked" onclick="connecttext('state03',this.checked);" > 記号
<input type="checkbox" name="state20" id="state20" value="1"> ！ <input type="checkbox" name="state21" id="state21" value="1" > ? <input type="checkbox" name="state22" id="state22" value="1"> @
<input type="checkbox" name="state23" id="state23" value="1"> － <input type="checkbox" name="state24" id="state24" value="1"> / <input type="checkbox" name="state25" id="state25" value="1"> =
</form>
フォームでは有効・無効を切り替える大元のチェックボックスに「onclick=”connecttext(‘state03’,this.checked);” 」を入れます。
これでクリックすると先にjavascriptで宣言しておいたconnecttext関数が実行されるようになります。
サンプル
これで「記号」がON状態であるならば各種記号のチェックボックスが有効になりON/OFF切り替える事ができるようになっています。
しかし、OFFであると各種記号のチェックボックスが無効状態になりOFFとます。
これを使ってカスタム
ランダム文字列作成ツールにこういった機能を使い特殊記号を追加できるようにしました。
実際に作ってみたのがランダム文字列作成ツールです。
こちらもwordpress上でランダムな文字列を生成します。
他にも先頭はアルファベットにするラジオボタンや紛らわしい文字は使わないようにするチェックボックスも追加しています。
なお、ブラウザの設定でジャバスクリプトをオフにしているとボタンを押しても生成しません。
ボタンを押した結果、別PHPファイルと通信させるのはジャバスクリプトの機能を使っている為です。
実行するにはジャバスクリプトをオンに設定する必要があります。
一応、これで完成です。
以上、ランダム文字列作成ツールでした！