Entry

JavaScript メモ - チェックボックスの小ネタ

2008年02月01日

「JavaScript チェックボックス」とかで検索すると,チェックボックスを全部チェックする方法云々な話が割とたくさん見つかります。これって需要あるのかしらん。

ということで,少しサンプル。Firefox 2.0 と InternetExplorer 6 で動作確認しました。ついでに,チェックボックスに手でチェックを入れると,チェックボックスの値をアラートで表示します(こっちの方が需要があると思うんだけど)。いきなりガビーンとアラートが出るけれども,びっくりしないでください。

ソースはこちら。

<script type="text/javascript" language="JavaScript">
window.onload = function() {

    // get checkbox checked/unchecked event
    var achkFooBar = document.getElementsByName("foobar");
    var chkFooBar = null;
    for (i = 0; i < achkFooBar.length; i++) {
        chkFooBar = achkFooBar[i];
        chkFooBar.onclick = function() {
            if (this.checked) {
                alert(this.value + " has been checked.");
            } else {
                alert(this.value + " has been unchecked");
            }
        };
    }

    // set all the checkboxes checked
    var btnCheck = document.getElementById("allCheck");
    btnCheck.onclick = function() {
        var achkFooBar = document.getElementsByName("foobar");
        for (i = 0; i < achkFooBar.length; i++) {
            achkFooBar[i].checked = true;
        }
        return;
    }

    // set all the checkboxes unchecked
    var btnUnCheck = document.getElementById("allUnCheck");
    btnUnCheck.onclick = function() {
        var achkFooBar = document.getElementsByName("foobar");
        for (i = 0; i < achkFooBar.length; i++) {
            achkFooBar[i].checked = false;
        }
        return;
    }

}
</script>
<p>
    <input type="checkbox" name="foobar" value="1001"/>
    <input type="checkbox" name="foobar" value="1002"/>
    <input type="checkbox" name="foobar" value="1003"/>
    <input type="checkbox" name="foobar" value="1004"/>
    <input type="checkbox" name="foobar" value="1005"/>
</p>
<p>
    <input type="button" id="allCheck" value="check"/>
    <input type="button" id="allUnCheck" value="uncheck"/>
</p>

特に難しいことはしていないので,いちいち書くことでもないんですけどね。こゆもんは小ネタとして持っておくと,いざというときに何かと便利だったりします。何が「いざ」なんだかよく分からんですけど。

Trackback
Trackback URL:
Ads
About
Search This Site
Ads
Categories
Recent Entries
Log Archive
Syndicate This Site
Info.
クリエイティブ・コモンズ・ライセンス
Movable Type 3.36
Valid XHTML 1.1!
Valid CSS!
ブログタイムズ

© 2003-2012 AIAN