<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.selected {
background: #0f0;
}
li {
cursor: pointer;
user-select:none;
}
</style>
</head>
<body>
Клик на элементе выделяет только его.
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
<br>
<ul id="ul">
<li>Кристофер Робин</li>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Мудрая Сова</li>
<li>Кролик. Просто кролик.</li>
</ul>
<script>
let from, to;
ul.onclick = function(e){
let target = e.target;
if(target.tagName != "LI") return;
if(e.ctrlKey || e.metaKey){
for(let i = 0; i<ul.children.length; i++){
if(ul.children[i] == target){
from = i;
}
}
target.classList.toggle('selected');
}
else if(e.shiftKey){
deleteAll(target);
for(let i = 0; i<ul.children.length; i++){
if(ul.children[i] == target) to = i;
}
if(from > to){
let from2 = from;
from = to;
to = from2;
}
for(let a = 0; a<ul.children.length; a++){
if(a>=from && a<=to) ul.children[a].classList.add("selected");
}
}
else{
deleteAll(target);
target.classList.toggle("selected");
for(let i = 0; i<ul.children.length; i++){
if(ul.children[i] == target){
from = i;
}
}
}
}
function deleteAll(li){
for(let i = 0; i<ul.children.length; i++){
ul.children[i].classList.remove("selected");
}
}
</script>
</body>
</html>
Простой
