<form action="http://www.marguerite.jp/Nihongo/WWW/Back.cgi" method="post" class="important">
    <fieldset>
        <legend>列車種別・その他の交通機関</legend>
        <p>利用可能な列車種別などを以下から撰んで下さい。</p>
        <script type="text/javascript" src="SetAllChecboxes.js"></script>
        <noscript>
            <dl>
                <dt><label><input type="checkbox" name="type" value="ALL" />全部選択</label></dt>
                <dd><samp>全部選択</samp>を指定した場合、以下の選択に関係なく全選択肢を選択したものとします。</dd>
                </dl>
            </noscript>
        <ul>
            <li><label><input type="checkbox" name="type" value="8" />新幹線</label></li>
            <li><label><input type="checkbox" name="type" value="4" />特別急行</label></li>
    (中略)
            <li><label><input type="checkbox" name="type" value="16" />バス</label></li>
            </ul>
        </fieldset>

    <fieldset>
        <legend>発着地</legend>
        <p>発着地を漢字で入力して下さい。</p>
    (中略)
        </fieldset>
    <ul>
        <li><input type="submit" value="検索" /></li>
        </ul>
    </form>

本頁の目次

チェックボックスを全部選択/不選択にするサンプルスクリプトの内容。

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

一方、サンプルスクリプト「CheckCheckBox.js」自身は以下のようになります。

読み飛ばす

//    スクリプトを呼び出すHTMLを書き出す。
document.write(
    '<ul>'+
    '<li><input type="button" value="全部選択" onclick="allSelect(); return(false); " onkeypress="if (event.keyCode!=10) return(true); else { allSelect(); return(false); }" /></li>'+
    '<li><input type="button" value="全部取消" onclick="noSelect(); return(false); " onkeypress"if (event.keyCode!=10) return(true); else { noSelect(); return(false); }" /></li>'+
    '</ul>'
    );

//    全てのname="type"属性のinput要素を選択済みにする。
function allSelect() {
    var f=document.forms[0].elements;
    var i=-1;

    while (++i<f.length) {
        if (f[i].name!='type') continue;
        f[i].checked=true;
        }
    }

//    全てのname="type"属性のinput要素を不選択にする。
function noSelect() {
    var f=document.forms[0].elements;
    var i=-1;

    while (++i<f.length) {
        if (f[i].name!='type') continue;
        f[i].checked=false;
        }
    }

本頁の目次

チェックボックスを全部選択/不選択にするサンプルスクリプトの実際の構成。

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

このスクリプトは三部に分かれております。

チェックボックスを全部選択/不選択にする処理を呼び出すボタンをHTML文書に書き出す処理
チェックボックスを全部選択する処理
チェックボックスを全部不選択にする処理

本頁の目次

チェックボックスを全部選択/不選択にする処理を呼び出すボタンをHTML文書に書き出す処理。

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

一番目の

チェックボックスを全部選択/不選択にする処理を呼び出すボタンをHTML文書に書き出す処理

は単純にHTMLをdocument.write()メソッドで書き出すだけです。

書き出しているHTMLは二つの<input type="button">要素で、いずれも

onclick属性で当該ボタンが押されたら指定の処理を実行して return(false); でボタン処理を中断させるようにし、
onkeypress属性で
- Enter以外のキーが押下された場合には return(true); で当該キー入力処理を続行させ、
- Enterキーが押下された場合にのみ指定の処理を実行して return(false); でボタン押下処理を中断させる
ようにします。

本頁の目次

二番目の

チェックボックスを全部選択する処理

は、函数 allSelect() で実現します。

零番目の<form>要素となる forms[0] オブジェクトの下位にある<input>要素などのオブジェクトの配列を forms[0].elements で取得して変数 f に代入します(つまり、変数 f は配列となります)。
変数 f の要素を零番目から f.length-1 で与えられる最大値まで一通り以下の事を行います。
1. 該当する要素の name属性値(nameで得られる)が type でなければ何もせずに次の要素の処理に移行します。
2. 該当する要素の name属性値(nameで得られる)が type ならば、checkedプロパティに true 値を代入して強制的に選択されたものとします。
  - 実は、checkedプロパティは当該要素がチェックボックスかラジオボタンでないと意味がなく、万一そうで無い場合にこのプロパティを扱おうとするとエラーの原因になる恐れもあります。このため、本来ならtypeプロパティの内容を調べて、それが checkbox 値となっている事も調べる必要があります。