s_val=0;

function CheckCheckBox() {
    if (document.forms[0].sename.value!='' && (s_val & 8)==0) {
        window.alert('検索エンジン名を入力する場合は、"その他"を指定して下さい。');
        return(false);
        }
    if (s_val==0) {
        window.alert('いずれか一つ以上を選択して下さい。');
        return(false);
        }
    if ((s_val & 8)!=0 && document.forms[0].sename.value=='') {
        window.alert('"その他"を選んだ場合は、検索エンジン名も入力して下さい。');
        return(false);
        }
    return(true);
}

本頁の目次

フォームのチェックボックスを確認するスクリプトを実行するHTML文書の記述。

▲記事先頭
△前項目
▽次項目

一方、HTML文書側には、以下のように記述されております。

読み飛ばす

    <form action=" (略) " method="post" onsubmit="return(CheckCheckBox());" onreset="s_val=0;">
        <fieldset>
            <legend>アンケート</legend>
            <p>いつもお使いの検索エンジンを教えて下さい(複数選択可)。</p>
            <ul>
                <li><label><input type="checkbox" name="search" value="yahoo"    onclick="s_val^=1;" onkeypress="return(true)" />ヤフージャパン</label></li>
                <li><label><input type="checkbox" name="search" value="googole"  onclick="s_val^=2;" onkeypress="return(true)"/>グーグル日本</label></li>
                <li><label><input type="checkbox" name="search" value="infoseek" onclick="s_val^=4;" onkeypress="return(true)"/>インフォシーク</label></li>
                <li>
                    <label><input type="checkbox" name="search" value="others" onclick="s_val^=8;" onkeypress="return(true)"/>その他</label>
                    (検索エンジン名：<input type="text" name="sename" size="24" />)
                    </li>
                </ul>
            <ul>
                <li>
                    <input type="submit" value="送信" />
                    <input type="reset" value="リセット" />
                    </li>
                </ul>
            </fieldset>
        </form>

本頁の目次

フォームのチェックボックスを確認するスクリプトの構成。

▲記事先頭
△前項目
▽次項目

フォームのチェックボックスを確認するスクリプトがどのようになっているのかを解説します。

以下の説明では、二進数についてある程度の知識がある事を想定して書きます。

まず抑えておきたい事。

▲記事先頭
△前項目
▽次項目

入力フォームの内容を確認する場合には、Formオブジェクトのvalueプロパティを調べました。

このとき、対応する入力フィールドとなる<input>要素のname属性値を用いて参照しておりました。

これは、フォーム内に同じname属性値を持つ<input>要素が他に無いからこそ利用出来たのです。

しかし、チェックボックスの場合、同じname属性値を持つ<input>要素が幾つもあり、valueプロパティを調べる事が出来ません。

実際、同じname属性を持つ入力フィールドが複数ある場合、valueプロパティの値はどちらの入力フィールドのものを取ればいいのか分かりません。

そこで、チェックボックスの状況を調べるには幾つかの手続きが必要になるのです。

本頁の目次

このスクリプトは、HTML文書のヘッダに<script src="CheckCheckBox.js">要素で呼出されるようになっており、その際に、一行目の「s_val=0;」が実行される事で、初期設定が完了します。

変数 s_val は、チェックボックスの選択肢が選択されたかどうかを表すフラグが入ります。

JAVAスクリプトでは、実行時に参照される変数を予め初期化しておかなければなりません。

このため、予め0を代入する事で初期化をしておきます。

本頁の目次

チェックボックスが選択/取消しされた場合の処理。

▲記事先頭
△前項目
▽次項目

各チェックボックスに対応する<input type="checkbox" name="search">要素内に、onkeypress属性で実行させる処理を書いております。

その処理は、以下のようなものです。

s_val^=○;

この「^=」は左辺と右辺の排他的論理和を取って代入する代入演算子で、フラグを反転させるために用いております。

例えば、一番目の<input type="checkbox" name="search">要素内には、

s_val^=1;

となっており、一番目の選択肢を選択すると、s_valの1に対応するビットと1とで排他的論理和が取られた結果が代入されます。

奇数回目の選択行為では、s_valの1に対応するビットが0となっているため、1との排他的論理和の結果1に対応するビットが1になります。

偶数回目の選択行為(この場合選択が取消される操作になります)では、s_valの1に対応するビットが1となっており、1との排他的論理和の結果1に対応するビットが0になります。

このように、排他的論理和を取る事でフラグの反転が可能になります。

尚、onclick属性とonkeypress属性を併用するに当たって、onkeypress属性では何も処理しておりませんが、これはブラウザに依ってチェックボックスを操作するキーが異なっている事に依ります。

理念上はonkeypress属性でキーボード操作に対しても適切な措置を施すべきとされておりますが、実際には現行のブラウザはキーボード操作にも充分対応しており、わざわざonkeypress属性で処理を指定すると却ってその実装を殺してしまい、却って不便を強いる事になり兼ねません。
今まではonkeypress属性に関して適切に処理しておりましたが、チェックボックスやラジオボタンの場合はブラウザごとに実装が異なるため、何も処理しないものとしました。

本頁の目次

リセットボタンが指定された場合の処理。

▲記事先頭
△前項目
▽次項目

<form>要素には「onreset="s_val=0;"」属性が埋め込まれております。

これは、フォーム内のリセットボタンが押された際に発生するイヴェントで、ここでは「s_val=0;」が実行される事になります。

<input type="reset">要素にonclick属性を入れる事でこの式を実行させても良いのですが、こちらはブラウザがフォームクリアのためのショートカットキーなどを実装している場合にも有効になりますので(実際にそう言うブラウザがあるかどうかは分かりませんが)、こちらの方が良いでしょう。

フォームの状態と変数は全く独立しているため、このようにフォームの初期化と同時に変数も初期化する必要がある訳です。

本頁の目次

実際の入力確認函数。

▲記事先頭
△前項目
▽次項目

実際の入力判定函数は、フォームの送信ボタンが押された時に起動します。

これは、<form>要素のonsubmit属性に依って実現します。

onsubmit属性は、当該<form>要素の送信手続きをイヴェントとして行なうイヴェントハンドラで、この属性値となるJAVAスクリプトが実行されます。

フォームの送信手続きは<input type="submit">要素が指定された場合だけでなく、<input type="text">要素などでENTERキーが押された場合などにも行なわれます。
理屈としては<input type="submit">要素にonclick属性を入れても良いのですが、インターネットエクスプローラで後者の場合にonclickイヴェントが発生しない場合があります。

ここでは、CheckCheckBox()函数を実行した結果をreturn文で返すと言うだけですが、正常に処理出来ない場合はfalseを返してフォームへの送信手続きをやめさせます。

本頁の目次

何を調べるべきか？

▲記事先頭
△前項目
▽次項目

ところで、実際に何を調べるべきでしょうか。

取敢えず、箇条書きにしてみましょう。

チェックボックスが全く選択されていない場合はエラーにする。: 当然過ぎるくらい当然ですね。
その他が選択されている場合は、テキスト入力が無いとエラーとなる。: その他が選択される場合は、代りに答えをテキストで入力してもらいます。
逆に、テキスト入力があるのにその他が選択されていない場合もやはりエラーとなる。: その他が選択されているのにテキスト入力が無いのはおかしいなら、逆にテキスト入力があるのにその他が選択されていないのもおかしいですね。

と言う事になるでしょう。

では、この順序で判定しましょう…と言いたいところなのですが、最後のテキスト入力があるのにその他が選択されていない場合、他のチェックボックスが全く選択されていない場合は一番初めのチェックボックスが全く選択されていない場合はエラーにする事からこの時点でエラーになります。

それでも良いのですが、

テキスト入力をしている場合には他のチェックボックスを選択しない可能性がかなり高い事、
そのような状況で洗濯していない旨のエラーを出すと、「入力したのにエラーになった」と利用者を惑わす恐れがある。

と言う事を考えると、チェックボックスが全く選択されていないかどうかを確認する前にテキスト入力を確認する方が良いでしょう。

結局、

まず、テキスト入力があるのにその他が選択されていない場合はエラーとする。
続いて、チェックボックスが全く選択されていない場合もエラーにする。
最後に、その他が選択されている場合は、テキスト入力が無いとエラーとなる。

と言う順序で判定するのがベターと言えます。

本頁の目次

1. テキスト入力されている場合に、`その他`が選択されているかを確認する。

▲記事先頭
△前項目
▽次項目

まず、テキスト入力があるのにその他が選択されていない場合はエラーとする処理を見てみましょう。

以下のようなコードになります。

読み飛ばす

    if (document.forms[0].sename.value!='' && (s_val & 8)==0) {
        window.alert('検索エンジン名を入力する場合は、"その他"を指定して下さい。');
        return(false);
        }

テキスト入力がされている場合は、document.forms[0].sename.valueプロパティを調べて空で無ければ、何か入力されていると判断出来ます。

続いて、四番目のチェックボックスが選択されていない場合、変数 s_val には8に対応するビットが0になっている筈で、この事は8との論理積を取る事で調べる事が出来ます。

結果、0だった場合は不適切と言う事になるため、エラーと見なします。

本頁の目次

2. チェックボックスが選択されているかどうかを確認する。

▲記事先頭
△前項目
▽次項目

続いて、チェックボックスが全く選択されていない場合もエラーにする処理をご覧下さい。

読み飛ばす

    if (s_val==0) {
        window.alert('いずれか一つ以上を選択して下さい。');
        return(false);
        }

チェックボックスが全く選択されていない場合、チェックボックスの状態を入れている変数 s_val は0になっている筈で、その場合はエラーダイアログを出し、「return(false);」で処理を中断させます。

本頁の目次

3. `その他`が選択されている場合に、テキスト入力がされているかを確認する。

▲記事先頭
△前項目
▽次項目

最後に、その他が選択されている場合は、テキスト入力が無いとエラーとなる処理です。

読み飛ばす

    if ((s_val & 8)!=0 && document.forms[0].sename.value=='') {
        window.alert('"その他"を選んだ場合は、検索エンジン名も入力して下さい。');
        return(false);
        }

具体的には、四番目のチェックボックスが選択されている場合に、となりのテキスト入力フィールド(<input type="text" name="name">要素)に何か入力されているかを調べます。

四番目のチェックボックスが選択されている場合、変数 s_val には8に対応するビットが1になっている筈で、この事は8との論理積を取る事で調べる事が出来ます。

続いて、document.forms[0].sename.valueプロパティを調べて空文字列であれば、エラーダイアログを出して処理を中断させます。