有更加简单的思路或者在前端上有困惑、想要一起学习
实现思路:
1.两种选择模式:①单选模式; ②多选模式;
2.直接点击,触发单选模式
3.在点击的时候,如果 shift 键处于keydown状态,则触发多选模式
4.应用于两种模式上的取消选中
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body,
div,
ul,
li {
margin: 0;
padding: 0;
}
html {
background-color: yellowgreen;
}
.wrapper {
width: 500px;
margin: 80px auto 0;
border-radius: 10px;
background-color: #fff;
box-shadow: 10px 10px 2px rgba(0, 0, 0, .15);
overflow: hidden;
}
.uList {
width: 100%;
list-style: none;
}
.uList li {
display: flex;
height: 75px;
/* background-color: red; */
border-bottom: 1px solid rgba(0, 0, 0, .4);
}
li .check,
li .text {
float: left;
height: 100%;
text-align: center;
line-height: 75px;
}
li .check {
width: 65px;
border-right: 1px solid yellowgreen;
}
.check input[type='checkbox'] {
cursor: pointer;
}
li .text {
flex: 1;
font-size: 24px;
letter-spacing: 2px;
}
</style>
<body>
<div class="wrapper">
<ul class="uList">
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">这是一个邮件收件箱</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">每个选项都可以选择</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">如果一直按着<code>shift</code>键</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">就可以同时选择多个选项</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">如果<code>shift</code>键松开</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">则不能再继续多选</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">只使用了原生js</div>
</li>
<li>
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="text">这是我的成果♪(^∇^*)
</div>
</li>
</ul>
</div>
<script>
let checkBoxes = document.querySelectorAll("input[type='checkbox']");
let texts = document.querySelectorAll(".text");
for (let i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].onclick = function (e) {
// 如果点击的时候,按住了shift键,则进入 多选模式
if (e.shiftKey && this.checked) {
if (checkBoxes[i].checked === true) {
texts[i].innerHTML = `<del>${texts[i].innerHTML}</del>`;
}
}
// 如果点击复选框的时候,没有按shift键,则进入 单选模式
else if (this.checked === true && !e.shiftKey) {
for (let j = 0; j < texts.length; j++) {
texts[j].innerHTML = texts[j].innerHTML.replace("</del>", "").replace("<del>", "");
checkBoxes[j].checked = false;
}
this.checked = true;
texts[i].innerHTML = `<del>${texts[i].innerHTML}</del>`;
}
// 如果取消选中,则文本删除线消失
if (this.checked === false) {
texts[i].innerHTML = texts[i].innerHTML.replace("</del>", "").replace("<del>", ""); // 通过 字符串的replace()方法,把del标签删去
}
}
}
</script>
</body>
</html>
效果展示:
shift key案例展示