我正在尝试选中所有带Shift键的复选框,例如Gmail Shift + Mouse Click
。一个接一个地工作,它是一个div
。但是,当我添加shift key
代码时,它不起作用。
已更改:
几乎完成。当我先单击,然后按Shift键,然后单击5th all checked,但是当我单击3rd时出现问题。直到5至3号才被选中。
let held = false;
let indexes = {start: null, end: null};
let start = false;
document.onkeydown = function(e) {
if(e.keyCode == 16) {
held = true;
}
}
document.onkeyup = function(e) {
if(e.keyCode == 16) {
held = false;
}
}
$(document).on('click','.dropCheckBox',function(){
$(this).parents(".capturesGrid").toggleClass('selected');
$(this).toggleClass('active');
if($(".grid-view .selected").length > 0)
{
$(this).parents(".grid-view").addClass('checking');
$(".options-bar").addClass('allSection');
$(".iconActions").removeClass('d-none');
$(".allsec-det").addClass('allSection-det');
}
else
{
$(this).parents(".grid-view").removeClass('checking');
$(".options-bar").removeClass('allSection');
$(".iconActions").addClass('d-none');
$(".allsec-det").removeClass('allSection-det');
}
if(held) {
indexes.end = $(this).data('index');
if(indexes.start) {
console.log(indexes);
if(indexes.end < indexes.start) {
$('.dropCheckBox').each(function(index, item) {
item = $(item);
if(!$(this).hasClass('active')) {
if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
if(!item.hasClass('active')) {
item.addClass('active');
$(this).parents(".grid-view").addClass('checking');
$(this).parents(".capturesGrid").toggleClass('selected');
}
}
} else {
if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
if(item.hasClass('active')) {
item.removeClass('active');
$(this).parents(".grid-view").removeClass('checking');
$(this).parents(".capturesGrid").toggleClass('selected');
}
}
}
});
}
} else {
$('.dropCheckBox').each(function(index, item) {
item = $(item);
if(!$(this).hasClass('active')) {
if(item.data('index') && item.data('index') < indexes.end) {
if(!item.hasClass('active')) {
item.addClass('active');
$(this).parents(".grid-view").addClass('checking');
$(this).parents(".capturesGrid").toggleClass('selected');
}
}
} else {
if(item.data('index') && item.data('index') < indexes.end) {
if(item.hasClass('active')){
item.removeClass('active');
$(this).parents(".grid-view").removeClass('checking');
$(this).parents(".capturesGrid").toggleClass('selected');
}
}
}
})
}
indexes = {start: null, end: null};
start = false;
} else {
indexes.start = $(this).data('index');
}
});
.dropCheckBox {
position: static;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
border-radius: 4px;
background: rgba(0,0,0,0.7);
cursor: pointer;
border: 2px solid #fff;
transition: all .2s ease;
}
.dropCheckBox.active {
background: linear-gradient(0deg, #214fc6, #4574ec);
border: none;
}
.capturesGrid .dropCheckBox {
position: absolute;
top: 10px;
left: 10px;
opacity: 1;
z-index: 2;
}
.dropCheckBox .icon {
width: 13px;
height: 13px;
fill: #dee3eb;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grids-row">
<div class="row">
<div class="col">
<div class="capturesGrid">
<div data-index="0" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="1" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="2" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="3" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="4" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="5" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="6" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="7" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="8" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
您可以使用checkbox
,并且可以找到不同的答案here
$(document).ready(function() {
var $chkboxes = $('.dropCheckBox');
var lastChecked = null;
$chkboxes.click(function(e) {
$(this).parents(".capturesGrid").toggleClass('selected');
$(this).toggleClass('active');
if(!lastChecked) {
lastChecked = this;
return;
}
if(e.shiftKey) {
$(this).removeClass('active');
var start = $chkboxes.index(this);
var end = $chkboxes.index(lastChecked);
$chkboxes.slice(Math.min(start,end)+1, Math.max(start,end)+1).toggleClass('active');
}
lastChecked = this;
});
});
.dropCheckBox {
position: static;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
border-radius: 4px;
background: rgba(0,0,0,0.7);
cursor: pointer;
border: 2px solid #fff;
transition: all .2s ease;
}
.dropCheckBox.active {
background: linear-gradient(0deg, #214fc6, #4574ec);
border: none;
}
.capturesGrid .dropCheckBox {
position: absolute;
top: 10px;
left: 10px;
opacity: 1;
z-index: 2;
}
.dropCheckBox .icon {
width: 13px;
height: 13px;
fill: #dee3eb;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grids-row">
<div class="row">
<div class="col">
<div class="capturesGrid">
<div data-index="1" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="2" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="3" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="4" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="5" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="6" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="7" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="8" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
<div class="col">
<div class="capturesGrid">
<div data-index="9" class="dropCheckBox">
<svg class="icon icon--check" viewBox="0 0 1024 1024">
<path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>