JavaScript原生js实现html中checkbox复选框按shift多选/全选/反选取被勾选的id

作者:admin 时间:2022-09-25 02:08:43 浏览:479 评论:0 小中大

纯原生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>

全选/反选代码

<input type='button' value='全选' onclick=\"for(item of document.querySelectorAll('[type=\'checkbox\']')){item.checked=!item.checked};this.value='反选'\" id='quanxuan'>

取所有被勾选的value值,并以","分割组成一个字符串

ids='';
for(item of document.querySelectorAll('.idscheckbox')){/*这里的选择器按情况修改*/
    item.checked==true?ids+=','+item.value:null;
}
if (ids.charAt(0)==","){
    ids=ids.slice(1);
}

JavaScript原生js实现html中checkbox复选框按shift多选/全选/反选 取被勾选的id

相关推荐

JavaScript原生js实现html中checkbox复选框按shift多选/全选/反选取被勾选的id