SOURCE

const checkBox = document.querySelectorAll(".item input");
const selectAllReBtn = document.querySelector(".selectAllRe");
const selectAllBtn = document.querySelector(".selectAll");
const cancelAllBtn = document.querySelector(".cancelAll");
let press = false;

selectAllReBtn.onclick = function(){
    selectAllRe(checkBox);
}

selectAllBtn.onclick = function(){
    selectAll(checkBox);
}

cancelAllBtn.onclick = function(){
    cancelAll(checkBox);
}

window.addEventListener('keydown',e=>{
       if(event.keyCode==16 && event.shiftKey){ //判断是否按下shift，按下则press=true;
        press = true;
        // console.log("按下shift!");
   }
})

window.addEventListener('keyup',e=>{
        if(event.keyCode==16){ //判断是否松开shift,松开则press=false
        press = false;
        // console.log("松开shift!");
    }
})

checkBox.forEach((item,index)=>{
    item.onclick = function(){
        if(press){ //若shift是按住状态下，点击chebox会选中当前至第一个
         selectUtilTop(index);
        }
    }
})

//选中0-i个checkbox
function selectUtilTop(index){
     while(index--){
         checkBox[index].checked = true;
     }
}

//反选
function selectAllRe(item){
   item.forEach(e=>{
       e.click();
   })
}

//全选
function selectAll(item){
    item.forEach(e=>{
       e.checked = true;
    })
}

//全取消
function cancelAll(item){
   item.forEach(e=>{
       e.checked = false;
   })
}

<div>
        
    <ul>
        <button class="selectAll">全选</button>
        <button class="selectAllRe">反选</button>
        <button class="cancelAll">取消</button>
        <li class="item">
            <input type="checkbox" name="1">
            <label for="1">Bring me back</label>
        </li>
        <li class="item">
            <input type="checkbox" name="2">
            <label for="2">Back in the game</label>
        </li>
        <li class="item">
            <input type="checkbox" name="3">
            <label for="3">Hustle every day</label>
        </li>
        <li class="item">
            <input type="checkbox" name="4">
            <label for="4">Nobody can reach our peek</label>
        </li>
        <li class="item">
            <input type="checkbox" name="5">
            <label for="5">I just want to get some pussy</label>
        </li>
        <li class="item">
            <input type="checkbox" name="6">
            <label for="6">Young money honey</label>
        </li>
    </ul>
</div>

div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    background-color:antiquewhite;
    width: 100%;
}

ul{
    border: 3px solid black;
    border-radius: 15px;
    height: 300px;
    padding: 10px 10px;
}

li{
    list-style: none;
}