おわたCHECKBOX俺版

prototype.js

NackyがオワタCHECKBOXとか面白いの作ってやがるので対抗してみた。
コンセプトはHTMLをjavascriptで汚染しない。

<label for="c1"><input type="checkbox" id="c1"/>ちぇっくぼっくす1</label><br />
<label for="c2"><input type="checkbox" id="c2"/>ちぇっくぼっくす2</label><br />
<label for="c3"><input type="checkbox" id="c3"/>ちぇっくぼっくす3</label><br />

<script language="JavaScript" type="text/javascript">
    /* 属性セレクタでinput type="checkbox"を全部引っ張る */
    window.onload=function(){
    $$("input[type=checkbox]").each(function(e){
        /* spanエレメント作成してオワタいれる */
        (span=document.createElement('span')).innerHTML='＞ ＼(^o^)／'; 
        
        /* onclickをbindAsEventListener()でセット。一緒にspanを渡しちゃう evtはダミーね　*/
        (e.onclick=function(evt,owata){  
            $(owata)[(this.checked)?'show':'hide']();
        }.bindAsEventListener(e,span))(); 
        /* Ff対策に一発実行しとく(F5でフォーム値リセットされないし) */

        e.parentNode.appendChild(span); /* labalノードにspan追加 */
    });
    }
</script>
  • $$()はクソ便利だけど、重いらしいので対象が多そうなときは他の方法でコレクションしる。しかし、なぜかIEでも属性セレクタ記述が動作するのがハッピー。
  • spanの追加位置が気に入らなければ、eから辿れるどっかに入れてちょ。
  • bindAsEventListenerの2番目以降のパラメータが便利すぐる。ただしe.checkedとか渡したりしてはダメ。
  • hide()とshow()の条件演算子はやりすぎな気がする。toggle()使いたいところだが、ロード時にcheckedが不確定だからヤメた。
  • (this.checked)?$(owata).show():$(owata).hide();って書くのがちょっとダサい感じがした。
  • ↑で$()使ってんのはElementオブジェクトに変換しないとIEでhide/showできんから。IE死ねばいいのに。

実行はこちら。

  • 追記。window.onloadでくくらないと、チェックした後F5で挙動おかしくなるっぽｗｗｗ