• 本記事の先頭▼
• 制作者へメール

堀北真希うさぎ

主な作品

人気女優をモデルにした制作者の創作キャラクタを用いた作品の一例

ページ案内▼

1. サイト表紙
2. しらぎくのウェブサイト作成入門
3. JAVAスクリプト
4. フォーム入力をチェック・支援するスクリプト
5. フォームのチェックボックスを確認するスクリプトの別解

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

フォームのチェックボックスを確認するスクリプトの別解・目次。

• ▲記事先頭
• ▽次項目

• フォームのチェックボックスを確認するスクリプトの別解の概要
• フォームのチェックボックスを確認するスクリプトの別解のサンプル
• フォームのチェックボックスを確認するスクリプトの別解のソースとHTML文書での記述
  • フォームのチェックボックスを確認するスクリプトの別解のソース
  • フォームのチェックボックスを確認するスクリプトの別解を実行するHTML文書の記述
• フォームのチェックボックスを確認するスクリプトの別解の構成
  • まず抑えておきたい事
  • 汎用のチェックボックスチェック処理
  • 特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理
  • HTMLから呼び出される処理本体

フォームのチェックボックスを確認するスクリプトの別解の概要。

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

チェックボックスの確認にはフォームのチェックボックスを確認するスクリプトで解説した方法が考えられます。

ただ、この方法は

• HTMLでの記述が複雑になる
• スクリプトの汎用性が余り良くない、すなわち別のフォームで使おうとしてもちょっと使い難い

と言う欠点があります。

そこで、これらの問題を解決した別解を解説します。

こちらはスクリプトがちょっと長いと言うのがありますが、汎用性を高めた記述となっております。

• 勿論、別のフォームで使う場合にはそれなりに修正は必要です。その意味でも単純なフォームではフォームのチェックボックスを確認するスクリプトの方がスクリプトが短い分修正が簡単と思われるかも知れません。このため、敢えてフォームのチェックボックスを確認するスクリプトを全面修正とせずに別解としてご紹介しました。

• 本頁の目次

フォームのチェックボックスを確認するスクリプトの別解のサンプル。

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

• 読み飛ばす

以下のフォームでは、ご利用になっている検索エンジンを撰んで頂きます。

スクリプトを実行出来る環境なら、

1. 全く選択せずに送信ボタンを押すと、エラーダイアログが開く筈です。
2. また、その他を選択した場合は、そのあとの検索エンジン名の入力フィールドに、お使いの検索エンジン名を入力しなければなりません。
3. 逆に、検索エンジン名の入力フィールドに、お使いの検索エンジン名を入力しているのに、その他が選択されていない場合もエラーとなります。

• 尚、フォームのデータ送出先は、このページに戻るCGIです(但しリファラを送らない設定の場合は戻れませんので、お手数ですがブラウザ操作でこのページにお戻り下さい)。入力されたデータには全く関知致しません。

• 本頁の目次

フォームのチェックボックスを確認するスクリプトの別解のソースとHTML文書での記述。

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

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

フォームのチェックボックスを確認するスクリプトの別解「CheckCheckBox.js」は以下のようになっております。

• 読み飛ばす

//    汎用のチェックボックスチェック処理。
function CheckCheckBox(formNO,nam,msg) {
    var f=document.forms[formNO].elements;
    var cf=0;

    var i=-1;
    var j,k;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='checkbox') continue;
        if (f[i].name!=nam) continue;
        if (f[i].checked) cf=1;
        }

    if (cf==0) {
        window.alert(msg+'が選択されておりません！');
        return(false);
        }
    return(true);
}

//    特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理。
function CheckCheckBoxAndText(formNO,name1,value1,name2,msg1,msg2) {
    var f=document.forms[formNO].elements;
    var cf=0;
    var tf=0;

    //    チェックボックスの判定。
    var i=-1;
    var j,k;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='checkbox') continue;
        if (f[i].name!=name1 || f[i].value!=value1) continue;
        if (f[i].checked) cf=1;
        }

    //    テキスト入力欄の判定。
    i=-1;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='text') continue;
        if (f[i].name!=name2) continue;
        if (f[i].value!='') tf=1;
        }

    if (tf && cf || !tf && !cf) return(true);

    if (tf) {
        window.alert(msg1);
        return(false);
        }

    window.alert(msg2);
    return(false);
}

//    本体。
function Check() {
    return (CheckCheckBoxAndText(0,'search','others','sename','検索エンジン名を入力する場合は、"その他"を指定して下さい。','"その他"を選んだ場合は、検索エンジン名も入力して下さい。') && CheckCheckBox(0,'search','検索エンジン名'));
}

• 本頁の目次

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

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

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

フォームのチェックボックスを確認するスクリプトに較べて、各チェックボックスとなる<input type="checkbox">要素にonclick属性やonkeypress属性が使われず、単純になっているのが分かると思います。

• 読み飛ばす

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

• 本頁の目次

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

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

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

まず抑えておきたい事。

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

フォームのチェックボックスを確認するスクリプトでは、変数を使ってチェックボックスが変化する度に変数の値を変え、それをチェックする方法を採りました。

別解では、フォーム内の要素から該当するチェックボックスの状況を調べて判定します。

ただ、この方法だけでは、特定のチェックボックスが選択された際には併せて特定のテキスト入力欄に記入されるべきであると言うのを判定出来ないので、これを別の処理でチェックします。

以上をまとめると以下の三部構成となります。

1. 汎用のチェックボックスチェック処理
2. 特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理
3. HTMLから呼び出される処理本体

• 本頁の目次

汎用のチェックボックスチェック処理。

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

汎用チェックボックスチェック処理 CheckCheckBox() 函数は、

1. 第一引数にチェックしたいフォームのHTML文書中での番号(零から始まる)
2. 第二引数にチェックしたいチェックボックスに与えているname属性値
3. 第三引数にエラーメッセージに入れるチェックボックスの名前

を与えて呼び出します。

長いので、当該箇所を全部抜き出して解説します。

• 読み飛ばす

//    汎用のチェックボックスチェック処理。
function CheckCheckBox(formNO,nam,msg) {
    var f=document.forms[formNO].elements;
    var cf=0;

    var i=-1;
    var j,k;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='checkbox') continue;
        if (f[i].name!=nam) continue;
        if (f[i].checked) cf=1;
        }

    if (cf==0) {
        window.alert(msg+'が選択されておりません！');
        return(false);
        }
    return(true);
}

まず、document.forms[0].elementsでHTML文書中第一引数で指定されたのフォーム内のチェックボックスなどの子要素オブジェクトの配列を取得して変数 f に代入します。

• 変数 f は当然配列変数となります。

そしてその配列を零番目から一つずつ調べて行きます。

• 配列の最大数はlengthで調べられますね。

1. document.forms[0].elementsで得られる子要素オブジェクトには<fieldset>要素などが含まれる場合があり、この場合typeプロパティが存在せず参照も出来ないので事前に弾きます。
2. その上でtypeプロパティの内容をtolowerCase()メソッドで小文字化してその値が'checkbox'であればチェックボックスとなるのでそれ以外は弾きます。
   • tolowerCase()メソッドで小文字化したのは、typeプロパティの内容が大文字かも知れないからです。
3. nameプロパティが第二引数で指定したname属性値と一致しているのであれば、チェックの対象となり、そうでなければやはり弾かれます。
4. 最後にcheckedプロパティで選択されているかどうかを調べ、選択されているのであれば変数 cf に 1 を代入する事でフラグを立てます。

一通り処理を終えたら、フラグが立っているかどうかを調べ、立っていなければ指定されたチェックボックスは全く選択されていないと言う事になるため、第三引数で指定されたチェックボックス名を組み合わせたエラーメッセージをwindow.alert()メソッドで表示させて、return(false); でフォーム提出処理を強制中断させます。

そうでなければどれか一つは選択された事となるので、return(true); でフォーム提出処理を継続させます。

• 本頁の目次

特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理。

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

特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理 CheckCheckBoxAndText() 函数は、特定のチェックボックスが選択されている場合に対応するテキスト入力欄が入力されているかを調べるもので、

1. 第一引数にチェックしたいフォームのHTML文書中での番号(零から始まる)
2. 第二引数にチェックしたいチェックボックスに与えているname属性値
3. 第三引数にチェックしたいチェックボックスに与えているvalue属性値
4. 第四引数にチェックしたいテキスト入力欄に与えているname属性値
5. 第五引数にテキスト入力だけされててチェックボックスが選択されていない場合のエラーメッセージ
6. 第六引数にチェックボックスのみ選択されていてテキストが入力されていない場合のエラーメッセージ

を与えて呼び出します。

こちらはもっと長いので、当該箇所を全部抜き出して解説します。

• 読み飛ばす

//    特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理。
function CheckCheckBoxAndText(formNO,name1,value1,name2,msg1,msg2) {
    var f=document.forms[formNO].elements;
    var cf=0;
    var tf=0;

    //    チェックボックスの判定。
    var i=-1;
    var j,k;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='checkbox') continue;
        if (f[i].name!=name1 || f[i].value!=value1) continue;
        if (f[i].checked) cf=1;
        }

    //    テキスト入力欄の判定。
    i=-1;
    while (++i<f.length) {
        if (!(f[i].type)) continue;
        if (f[i].type.tolowerCase()!='text') continue;
        if (f[i].name!=name2) continue;
        if (f[i].value!='') tf=1;
        }

    if (tf && cf || !tf && !cf) return(true);

    if (tf) {
        window.alert(msg1);
        return(false);
        }

    window.alert(msg2);
    return(false);
}

まず、初めの指定されたチェックボックスの判定は汎用のチェックボックスチェック処理と殆ど同じものです。

但し、value属性値もチェックするため、valueプロパティも確認します。

• このため、同じname属性値を持つ他のチェックボックスに同じvalue属性値を持つものがあると正常に動作しません。この点は注意して下さい。

続いて、指定されたテキスト入力欄についての判定を行いますが、これも汎用のチェックボックスチェック処理と余り変わりません。

強いて言えば、

• テキスト入力欄の場合にはtypeプロパティが'text'になるので、そのように判定する事
• テキスト入力欄に入力されているかどうかを判定するためにはvalueプロパティを診る事

位の違いのみです。

最後に、

• 指定されたチェックボックスと指定されたテキスト入力欄がいずれも入力されているか
• 指定されたチェックボックスと指定されたテキスト入力欄がいずれも入力されていない場合

には正常終了とし、return(true); でフォーム提出処理を続行させます。

そうでない場合には不正な入力状況となるため、エラーメッセージをwindow.alert()メソッドで表示させます。

• 本頁の目次

HTMLから呼び出される処理本体。

• ▲記事先頭
• △前項目

HTMLから呼び出される処理本体は Check() 函数としております。

処理自体は単純ですが、ソースがかなり前にあるので改めて掲載しましょう。

• 読み飛ばす

//    本体。
function Check() {
    return (CheckCheckBoxAndText(0,'search','others','sename','検索エンジン名を入力する場合は、"その他"を指定して下さい。','"その他"を選んだ場合は、検索エンジン名も入力して下さい。') && CheckCheckBox(0,'search','検索エンジン名'));
}

函数の引数の記述が長いので分かり難いかも知れませんが、この処理は return()文一つのみです。

引数を省略すると

• return (CheckCheckBoxAndText(…) && CheckCheckBox(…));

となり、要するに

1. 特定のチェックボックスが選択されている場合に限ってと他の入力欄の汎用のチェックボックスチェック処理・CheckCheckBoxAndText()函数
2. 汎用のチェックボックスチェック処理・CheckCheckBox()函数

のいずれもが true 値を返してきた場合にのみ返す値を true値としてフォーム提出処理を続行させ、そうでない場合には返される値は false 値となってフォーム提出処理が中断されると言うものです。

尚「甲 && 乙」と言う論理積演算は、甲が false値, 零またはヌルの場合にはその時点で乙を評価せずに その値を与えるものとなります。

乙が評価されるのは甲が true値, 非零数値または非ヌルである場合のみで、この場合に限り乙の評価値が返されます。

つまり、この処理では甲に当たるCheckCheckBoxAndText()函数が true値を返さない場合には乙に当たるCheckCheckBox()函数は呼び出されさえしない事となります。

この順序は重要で、もし逆の順序であれば、CheckCheckBox()函数が true値を返さない場合にはCheckCheckBoxAndText()函数が全く呼び出されさえしない事となり、その結果、

• その他が選択された場合に限り入力されるべきテキスト入力欄が、その他が選択されずに記述だけされていて
• 且つ他のチェックボックスも全く選択されていない場合に、

検索エンジンが選択されておりません！と言う、入力したにも拘らず入力していない場合にのみ出されるべきエラーメッセージが出てしまいます(この場合好ましいエラーメッセージは検索エンジン名を入力する場合は、"その他"を指定して下さいとなる筈です)。

• 本頁の目次

• 本文の先頭へ

しらぎくのウェブサイト作成入門サイトマップ

• ウェブサイト作成入門
  • HTML & CSS入門
    • HTML5入門
    • CSS入門
  • HTMLのいろいろな要素
  • CSS
    • CSSのいろいろな機能
    • CSSの小技
  • JAVAスクリプト
    • 基本的なJAVAスクリプト
    • ダイナミックHTMLとDOM
    • CSSを補完するDOMの応用
    • 簡単なAjax
    • スクリプトで絵を描くには(<canvas>要素)
  • 携帯電話向けコンテンツの書き方
  • リファレンス
    • HTML 5リファレンス
    • HTML 4/XHTML 1リファレンス
    • CSSリファレンス
    • DOMリファレンス
    • <canvas>要素リファレンス
  • 別サイト
    • WWW公開実験場
    • メモ

• 制作者へのご連絡
• コンテンツ内検索
• 

• フォーム入力をチェック・支援するスクリプト
• JAVAスクリプトの使い方
• しらぎくのウェブサイト作成入門
• しらぎくさいと日本語版表紙