画面内の全チェックボックスをON／OFFするブックマークレット

はじめに

画面内の全てチェックボックスを、ONまたはOFFにするブックマークレットを保管する。

解説

JavaScriptでチェックボックスのcheckedプロパティを変更しても、clickイベントが発生しない。そのため、単純にcheckedプロパティの変更のみを行っても、clickイベントで何らかの処理を行っているシステムなどではGUIでの操作をエミュレートできていないことになる。（結果、変なJavaScriptエラーが発生して悩んだりすることになる。）
下記のコードでは、if (d.createEvent) から始まるブロック部分で、JavaScriptからイベントを発生させている。比較的新しいブラウザであれば、うまく動作するだろう。このような処理は、jQueryなどの各種JavaScriptライブラリで、triggerといったメソッド名で実装されている。

動作確認済ブラウザ

以下のブラウザでうまく動作した。*1

• IE 6.0
• Firefox 3.0.6
• Safari 3.1

元のコード

javascript: (function() {
    var d = document,
    a = d.getElementsByTagName("input"),
    c,
    e,
    b = confirm("check?");
    for (var i = 0; i < a.length; i++) {
        c = a[i];
        if ((c.type == "checkbox") && (c.checked != b)) {
            c.checked = b;
            if (d.createEvent) {
                e = d.createEvent("HTMLEvents");
                e.initEvent("click", true, true);
                c.dispatchEvent(e);
            } else if (d.createEventObject) {
                e = d.createEventObject();
                e.element = function() {
                    return e.srcElement;
                };
                c.fireEvent("onclick", e);
            }
        }
    }
})();

ブックマークレット化したコード

javascript:(function(){var d=document,a=d.getElementsByTagName("input"),c,e,b=confirm("check?");for(var i=0;i<a.length;i++){c=a[i];if((c.type=="checkbox")&&(c.checked!=b)){c.checked=b;if(d.createEvent){e=d.createEvent("HTMLEvents");e.initEvent("click",true,true);c.dispatchEvent(e);}else if(d.createEventObject){e=d.createEventObject();e.element=function(){return e.srcElement;};c.fireEvent("onclick",e);}}}})();

*1:全てWin XP Pro SP2上