チェックボックスを一度に複数選択したい

　こんばんは。イベントに関するJavaScriptの話をば。

　ppBlogでは、管理画面で記事の削除やコメントの削除が出来ますが、現状、ひとつずつしか削除できません。削除したいものが沢山あるときは大変なので（あまりそういう機会はないと思うけれど）、次回アップデート版では、チェックボックスでチェックした複数の記事などを1度に削除出来るようにする予定です。実際のスクリーンショットは以下。

開発版ですよ

　チェックボックスをチェックする操作というのは、数が少ない内は良いけど、数が多くなるとマウスで逐一クリックしていくのが億劫になります。なので、シフトキー(SHIFT)を活用できるようにします。つまり、最初の方のチェックボックスをチェックしておいて、シフトキーを押した状態で、下の方のチェックボックスをクリックすると、その間のチェックボックスも自動的にチェックされた状態になるというものです。この手のインターフェイスはよく使われていて、例えば、Gメールでも、そういう操作が可能です。以下に実際のデモを載せておきます（下のデモはスクリーンショットじゃなくて、ちゃんと操作できますよ）。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
選択：すべてなし

　さて、この手のことを実装するには、シフトキー(SHIFT)が押された状態というのをJavaScriptで検知する必要があります。最初は、

var shift, e = oParts.evt, k = e.keyCode ? e.keyCode : e.which;
shift = e.shiftKey ? e.shiftKey : (k == 16 ? true : false);
if(shift){ // シフトキーが押されていれば

なんてのを思いつきましたが、キーボードイベントは、以前の知識しかないなぁ、と思って、新しい情報をwebで探してみました。したら、えらく新しいのがありました（今年七夕の記事です）。

　JavaScript Madness: Keyboard Events

　もはや、event.whichなんてのは不要で、event.keyCodeでこと足りるんですね。しかも、どのブラウザでも、event.shiftKeyを認識してくれそうです。なので、最終的には、この部分は、

if(oParts.evt.shiftKey){ // シフトキーが押されていれば

と非常に短く記述することが出来ますね。ppBlog向けの、上に上げたデモのソースコードを載せておきます。

o(document).on("click", function(){ // Event delegation
  var tar = oParts.evt.target; 
  if(tar.nodeName.toLowerCase() == "input" && tar.type.toLowerCase() == "checkbox"){
   var tr = tar.parentNode.parentNode;
   if(tar.checked == false){
    tr.style.backgroundColor = (tr.rowIndex % 2 == 0) ? "#eff1f3" : "#fff";
   } else tr.style.backgroundColor = "highlight";
   if(oParts.evt.shiftKey){
    var i = tr.rowIndex - 1, item, cb = o("td > input[type=checkbox]");
    for(i; i > 0; i--){
     item = cb.item(i).$;
     if(item.checked == true) break;
     item.checked = true;     
     item.parentNode.parentNode.style.backgroundColor = "highlight";
    }
   }
  }
 });

function resetAll(){ // すべてのチェックボックスを解除する
 o("td > input[type=checkbox]").each(function(e, i){
  if(e.checked){
   e.checked = false;
   e.parentNode.parentNode.style.backgroundColor = (i % 2 == 0) ? "#eff1f3" : "#fff";
  }
 });
}

function setAll(){ // すべて選択する
 o("td > input[type=checkbox]").each(function(e){
  e.checked = true;
  e.parentNode.parentNode.style.backgroundColor = "highlight";
 });
}

　ppBlogでは、多くのマウスイベント処理がありますが、ほとんどはEvent Delegation^Gを活用しています。上のデモでも、チェックボックス1つひとつにイベントを登録していくのではなくて、クリックされた要素がチェックボックスであれば･･･、という捉え方をしています。イベントは、バブリング(伝達)していくものなので、最上位要素でモニターして、そのターゲットさえ掴めれば良いというわけです。

　Event Delegation versus Event Handling 　