JavaScript原生js实现html中checkbox复选框按shift多选

纯原生JavaScript代码 无需任何库

整理后 可以直接拿来用的代码

<input type='checkbox' name='cateid[]'>
<input type='checkbox' name='cateid[]'>
<input type='checkbox' name='cateid[]'>
<input type='checkbox' name='cateid[]'>

<script>/*使checkbox可以按shift多选的js代码*/
var cbx_bin=-1;var cbx_end=0;var shiftdown=0;
var checkboxArr=document.querySelectorAll("[type='checkbox']");
for (i=0; i<checkboxArr.length; i++){checkboxArr[i].setAttribute('index',i);
	checkboxArr[i].style="width:18px;height:18px;cursor:pointer;";/*顺便调了下样式 可以去掉*/
	checkboxArr[i].onclick=function(){if (this.checked==true){
	if(shiftdown==0){cbx_bin=Number(this.getAttribute('index'));}else{cbx_end=Number(this.getAttribute('index'));
	if(shiftdown==1){if(cbx_bin>cbx_end){cbx_ls=cbx_end;cbx_end=cbx_bin;cbx_bin=cbx_ls}for (ii=0; ii<checkboxArr.length; ii++){
	if(ii>=cbx_bin && ii<=cbx_end){checkboxArr[ii].checked=true}}}}}}
	checkboxArr[i].onkeydown=function(ev){if(ev.key=="Shift"){shiftdown=1;}}
	checkboxArr[i].onkeyup=function(ev){if(ev.key=="Shift"){shiftdown=0;}}
}
</script>

整理前带注释的代码

<input class='cateid' type='checkbox' name='cateid[]'>
<input class='cateid' type='checkbox' name='cateid[]'>
<input class='cateid' type='checkbox' name='cateid[]'>
<input class='cateid' type='checkbox' name='cateid[]'>

<script>
var cbx_bin=-1;
var cbx_end=0;
var shiftdown=0;
var checkboxArr=document.querySelectorAll("[type='checkbox']");//把checkbox全都放到数组中  选择器可以按需修改  不改也不影响使用

for (i=0; i<checkboxArr.length; i++){
	checkboxArr[i].setAttribute('index',i);/*设置自定义属性,方便下面读取索引*/
	checkboxArr[i].style="width:18px;height:18px;cursor:pointer;";//顺便调整下大小 原本的有点小
	checkboxArr[i].onclick=function(){
		if (this.checked==true){//只处理选中状态
			console.log("shift状态"+shiftdown);
			if(shiftdown==0){//如果还没按shift 就标记当前索引  为开始
				cbx_bin=Number(this.getAttribute('index'));
			}else{				//否则 就标记当前索引为结束
				cbx_end=Number(this.getAttribute('index'));
				/*开始和结束有了  数组也有了  就好办了*/
				if(shiftdown==1){
					if(cbx_bin>cbx_end){cbx_ls=cbx_end;cbx_end=cbx_bin;cbx_bin=cbx_ls}//调整一下顺序

					for (ii=0; ii<checkboxArr.length; ii++){
						if(ii>=cbx_bin && ii<=cbx_end){
							checkboxArr[ii].checked=true
							console.log("选中一个");
							console.log(ii);
						}else{
							console.log(ii,ii>=cbx_bin,ii<=cbx_end,cbx_bin,shiftdown,cbx_end,checkboxArr.length);
						}
					}

				}
			}
		}
	}
	checkboxArr[i].onkeydown=function(ev){/*当某键被按下*/
		if(ev.key=="Shift"){
			shiftdown=1; //标记为被按下
		}
	}
	checkboxArr[i].onkeyup=function(ev){/*当某键被松开*/
		if(ev.key=="Shift"){
			shiftdown=0;//标记为被松开
		}
	}
}



</script>