JavsScript - 使用 shift 連續選取 checkbox

參考資源

直接使用 JavaScript 來實現即可，不需要套件

成果

以下是實際套用在 DataTable 上的一個範例

HTML

<input type="checkbox" name="check[]" value="" class="big_checkbox_input shift_checkbox">

1	<input type="checkbox" name="check[]" value="" class="big_checkbox_input shift_checkbox">

JavaScript

// checkbox shift 選取
let chkboxShiftLastChecked;
$(document).on('click', '.shift_checkbox',function(e){

    var $chkboxes = $('.shift_checkbox');

    if (!chkboxShiftLastChecked) {
        chkboxShiftLastChecked = this;
        return;
    }

    if (e.shiftKey) {
        var start = $chkboxes.index(this);
        var end = $chkboxes.index(chkboxShiftLastChecked);

        $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', chkboxShiftLastChecked.checked);
    }

    chkboxShiftLastChecked = this;
});

// checkbox shift 選取

let chkboxShiftLastChecked;

$(document).on('click', '.shift_checkbox',function(e){

var $chkboxes = $('.shift_checkbox');

if (!chkboxShiftLastChecked) {

chkboxShiftLastChecked = this;

return;

}

if (e.shiftKey) {

var start = $chkboxes.index(this);

var end = $chkboxes.index(chkboxShiftLastChecked);

$chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', chkboxShiftLastChecked.checked);

}

chkboxShiftLastChecked = this;

});

683 total views, 1 views today

JavsScript - 使用 shift 連續選取 checkbox

參考資源

成果

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝