選択された時だけでなくチェックボックスが非選択された時にも処理したい場合はonDeselectイベントが用意されています。onSelect同様にイベントが発生すると関数が呼び出されます。onDeselectイベントで実行される関数にはパラメータとして選択されたエレメントへの参照が渡されます(onSelect同様にthisで参照できます)。

サンプル06の実行結果

選択したチェックボックスの名前(name属性で指定されたもの)がテキストフィールドに表示される

サンプル06

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>FancyFormサンプル</title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/mootools.v1.11.js"></script>
        <script type="text/javascript" src="js/moocheck.js"></script>
        <script type="text/javascript"><!--
            window.addEvent("load", function(){
                FancyForm.start( 0, {
                    onClasses: {
                        checkbox: "checked",
                        radio: "selected"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    }
                } );

                FancyForm.start( true, {
                    onClasses: {
                        checkbox: "checked",
                        radio: "selected"
                    },
                    offClasses: {
                        checkbox: "unchecked",
                        radio: "unselected"
                    },
                    onSelect: function(obj){
                        document.getElementById("stat").value = "【選択】"+obj.name;
                    },
                    onDeselect: function(obj){
                        document.getElementById("stat").value = "【非選択】"+obj.name;
                    }
                } );

            });

        // --></script>
    </head>
    <body>
    <h1>FancyFormサンプル</h1>
        <form name="dataForm1" action="./check.cgi" method="get">
            【使用OS】
            <label><input type="radio" name="osType" id="r1" checked>MacOS X</label>
            <label><input type="radio" name="osType" id="r2">UNIX</label>
            <label><input type="radio" name="osType" id="r3">Windows</label>
            【主な使用言語】
            <label><input type="checkbox" name="jp" id="c1" checked>日本語</label>
            <label><input type="checkbox" name="en" id="c2">英語</label>
            <label><input type="checkbox" name="etc" id="c3">その他の言語</label>
            選択結果：<input type="text" id="stat"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

FancyFormは手軽に入力フォームのエレメントをグラフィカルなものに変更できるライブラリです。入力フォームの見栄えが気になる人は使ってみるとよいでしょう。