纯原生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>相关推荐
html复选框checkbox的使用, 未选中也是on的问题,原生javascript操作checkboxhtml代码:已改成html<label for="myCheckbox">点击我</label>JavaScript代码:document.getElem
chartjs实现柱状图/横向柱状图/曲线图/折线图/饼状图/环形图 分析图 javascriptchartjs最新版好像有些功能实现不了 不知道是不会用还是什么问题 所以只要用的旧版其中 Chart.js 版本为 v2.9.4 可以去网上搜索下载例子:<!doctype html>
原生javascript生成随机字母 js取随机字符JavaScript取随机字母:方式有很多 我比较喜欢这一种 其中字符列表 和 要取的个数 改起来都比较方便<script> function 取随机字母(count){
原生js,原生javascript写的开关按钮<style> td,table{border:1px solid #323841;} </style> <form method="get"
html中select option原生javascript按照value值 或 按照文本 选择指定选项function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=se
原生javascript获取指定的get请求参数值代码如下:function 取get参数值(key){ var url = location.search; str = url.match(/\\?(\\S*)/)[1]; //文本_取右边 ?
原生javascript选择select的option选项 选择指定的值JavaScript代码:function select(id,value){//select标签的id 和 要被选择的选项 obj=document.getElementById(id);opt
javascript 解析json解析 遍历obj=JSON.parse('{"id":"8","home":"beijing","uid&qu
html javascript给某元素添加子元素,dom给父元素添加子元素var drag = document.getElementById('zichuangkou'); /*取得某个元素*/ span1 = document.createElemen
javascript操作select option 下拉组合框1、获取选中select的value和text,html<select id="mySelect"> <option value="1"&g