[JS] Radio Shift Multi Select

最近工作需要寫了個小程式，這邊做個紀錄

程式碼在這邊：http://jsfiddle.net/mesak/AZnpP/1/embedded/result/

這個程式的作用是 點第一個物件，按住 Shift ，點第 n 個物件，在第一個到第n 個物件都會被 checked

這個功能在 gmail 也有實現出來

var index = 0;
var shift_down = false;
var radio_group = {
      'y':$(':radio[id^="idradio_y"]'),
      'n':$(':radio[id^="idradio_n"]')
    }
radio_group.y.prop('checked',true);
$(':radio').bind('change',function(){
    var this_index = radio_group[this.value].index(this);  
    if( shift_down )
    {
        var start = Math.min(index,this_index);
        var end   = Math.max(index,this_index);
        radio_group[this.value].slice(start,end).prop('checked',true);
    }
    index = this_index
})
$(document).bind('keydown',function(e){
    if(e.which == 16 ){
        shift_down = true;
        $('#output tr').eq(index).addClass('info')
    }
}).bind('keyup',function(e){
    if(e.which == 16 ){
        shift_down = false;
        $('#output tr').removeClass('info')
    }
}).bind('selectstart',function(){return false})

解釋一下 這個程式的大概語意

首先需要把 物件根據自己的 value 做分類，以防多次 selector，節省一點記憶體是很重要的www

接著把事件綁在 所有 radio 上，根據他的 value 值去取得目前 物件在 群組內的數值

如果 shift 被按下 就把 起始值 index 與 目前被選擇的物件 index  區間內的物件 被選擇

接著把 目前的 index 值 set 到 外部的 index 值

如果要改成  checkbox  則需要在 事件中 把 checked 值給抓取下來

var checked = $(this).prop('checked');

把後段的 true 改成 checked 就可以 多選取消、多選核選