JavaScript实现shift键连续多选

在这里插入图片描述

1、HTML部分

<div class="inbox">
  <div class="item">
    <input type="checkbox">
    <p>This is an inbox layout.</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Check one item</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Hold down your Shift key</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Check a lower item</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Everything in between should also be set to checked</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Try to do it without any libraries</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Just regular JavaScript</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Good Luck!</p>
  </div>
  <div class="item">
    <input type="checkbox">
    <p>Don't forget to tweet your result!</p>
  </div>
</div>

2、CSS部分

<style>

  html {
    font-family: sans-serif;
    background: #ffc600;
  }

  .inbox {
    max-width: 400px;
    margin: 50px auto;
    background: white;
    border-radius: 5px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
  }

  .item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F1F1F1;
  }

  .item:last-child {
    border-bottom: 0;
  }

  /*:check伪类选择器代表任何选中或者切换到on状态的单选(如<input type="radio">、checkbox或者option元素)*/
  input:checked + p {
    background: #F9F9F9;
    text-decoration: line-through;
  }

  {
    margin: 20px;
  }

  p {
    margin: 0;
    padding: 20px;
    transition: background 0.2s;
    flex: 1;
    font-family:'helvetica neue';
    font-size: 20px;
    font-weight: 200;
    border-left: 1px solid #D1E2FF;
  }
</style>

3、JavaScript部分

3.1 先获取所有input的值

const checkboxs = document.querySelectorAll('.inbox input[type = checkbox]');

这里有需要注意的
因为querySelectorAll得到的不是规范的阵列,所以我们需要在外面加一个Array.from()来规范它

const checkboxs =Array.from(document.querySelectorAll('.inbox input[type = checkbox]'));

3.2 由于是多个input,所以要做遍历循环,并对点击事件进行监听

checkboxs.forEach((item)=>{
	item.addEventListener("click",clickHandler)
})

function clickHandler(e){
	console.log(e);
}

因为需要用shiftkey(shift按钮)来实现,所以我们在控制台找到shiftKey是一个布尔值。如果按住shift键同时点击选项,那么shiftKey为true,否则为false。

在这里插入图片描述

3.3 由于要做多选,所以要这样

3.3.1 第一步:设置一个变量来定义第一个选中的东西(firstCheck)

let firstCheck = null;

3.3.2 第二步:判断元素是否被选中

if(this.checked){
	firstCheck = checkboxs.indexof(this);
}else{
	firstCheck = null;
}

3.3.3 第三步:两个条件

①首先要确定shift键是打开的

②其次你有一个选中的值,lastCheck就是用来判断的。

let firstCheck;
if(this.checked){
	lastCheck = checkboxs.indexof(this);
	
	checkboxes.slice(
		Math.min(nowCheck,firstCheck),
		Math.max(nowCheck,firstCheck)
	).forEach(input=>(inpput.checked = true))
	
	firstCheck = checkboxes.indexof(this);
	
}else{
	lastCheck = null;
}

:::知识点
这里要注意,因为firstCheck是一个数值的判断,而电脑是会将数字转化为true或者false来执行,所以如果选择列表第一个(数值为0),那么电脑就会把0转化为false,所以当选择列表第一个数字的时候,按住shift键要多选是执行不了的。在以后如果变量的类型是数值的,那么不能直接扔进if语句进行判断,一定要把它的判断条件写完整。

slice中由于不知道选中的顺序是什么(可能从前面选,也可能从后面选,所以要用Math来进行对比)

slice是一个选择区间的函数
:::

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 shift,需要监听鼠标按下和抬起事件,以及盘按下和抬起事件。 首先,给每个需要择的行添加一个 `data-index` 属性,表示该行的索引。 然后,在鼠标按下事件中记录下当前中的行的索引(如果没有中,则记录当前点击的行的索引),在鼠标抬起事件中记录结束中的行的索引,计算出这两个行的之间的行,并将它们中。 在盘按下事件中,如果按下的是 shift ,记录下当前中的行的索引(如果没有中,则记录当前焦点所在的行的索引),在盘抬起事件中记录结束中的行的索引,计算出这两个行的之间的行,并将它们中。 以下是示例代码: ```javascript // 监听鼠标按下事件 table.on('checkboxMouseDown', function(obj){ var index = obj.tr.data('index'); if (!table.config.checkStatus.isAll) { table.checkStatus(obj.config.index).data.forEach(function(data){ if (data.index === index) { data.mousedown = true; } else { data.mousedown = false; } }); } else { table.checkStatus(obj.config.index).data.forEach(function(data){ data.mousedown = false; }); } }); // 监听鼠标抬起事件 table.on('checkboxMouseUp', function(obj){ var index = obj.tr.data('index'); var checked = false; table.checkStatus(obj.config.index).data.forEach(function(data){ if (data.index === index) { checked = true; } else if (data.mousedown) { data.checked = true; } else if (data.checked) { data.checked = false; } }); if (checked) { table.checkStatus(obj.config.index).push(obj.data); } else { table.checkStatus(obj.config.index).remove(obj.data); } }); // 监听盘按下事件 table.on('checkboxKeyDown', function(obj){ if (obj.event.keyCode === 16) { var index = obj.tr.data('index'); if (!table.config.checkStatus.isAll) { table.checkStatus(obj.config.index).data.forEach(function(data){ if (data.index === index) { data.keydown = true; } else { data.keydown = false; } }); } else { table.checkStatus(obj.config.index).data.forEach(function(data){ data.keydown = false; }); } } }); // 监听盘抬起事件 table.on('checkboxKeyUp', function(obj){ if (obj.event.keyCode === 16) { var index = obj.tr.data('index'); var checked = false; table.checkStatus(obj.config.index).data.forEach(function(data){ if (data.index === index) { checked = true; } else if (data.keydown) { data.checked = true; } else if (data.checked) { data.checked = false; } }); if (checked) { table.checkStatus(obj.config.index).push(obj.data); } else { table.checkStatus(obj.config.index).remove(obj.data); } } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值