选中的 Laravel 复选框将 div 设置为活动状态

Question

我有一个foreach循环，我将在其中填充div上的时隙ID，日期和时间。我想要实现的是选中div 中的复选框后，所选div 将突出显示。如果我尝试选中另一个复选框，它将取消选中我选中的前一个复选框。我正在使用原生的javascript作为我的JavaScript代码。

这是复选框的外观

以下是我的 html 代码：

<div class="timeslots-section">
<div>
<div class="timeslots text-center">
@foreach ($timeslots as $timeslot)
<div class="timeslot" id="timeslot">
<input type="checkbox" id="timeslotchk" name="timeslot" value="{{$timeslot->timeslotID}}"> 
<label>{!! presentTableDate($timeslot->deliveryDate) !!}</label>
<label>{!! displayTime($timeslot->deliveryStartTime) !!} - 
{!! displayTime($timeslot->deliveryEndTime) !!}</label>
</div>
@endforeach
</div>
</div>
</div>

以下是我当前的JavaScript：

var selectall = document.getElementsById('timeslotchk');
var timeslotdiv = document.getElementById('timeslot');
selectall.onclick = function() {
if(document.getElementById('checkbox1').checked = true){
timeslotdiv.classList.add('active');
}
else{
timeslotdiv.classList.remove('active');
}
}

Answer 1

在这里检查一下，我修复了您正在尝试的功能。检查当前div 时，您的代码未重置所有其他timeslotdiv。在下面的代码中，更改事件函数checkboxChecked()首先重置所有div，包括当前div，然后检查更改的值。如果选中了当前复选框true则进行设置，否则保持重置。

const selectElement = document.querySelectorAll('.timeslotchk');     
selectElement.forEach((element) => element.addEventListener('change', checkboxChecked));
function checkboxChecked() {
const checked = this.checked; //save current value
//reset all time slot divs
const timeslotDivs = document.getElementsByClassName('timeslot');
Array.from(timeslotDivs).forEach(function(t) {
t.classList.remove('active');
t.querySelector('.timeslotchk').checked = false;
});
//set current div based on current value
if(checked) {
this.checked=true;
this.parentNode.classList.add('active');
}
}

.timeslot {
border: 1px solid black;
margin-bottom: 10px;
}
.active {
background: green;
}

<div class="timeslots-section">
<div>
<div class="timeslots text-center">
<!-- @foreach ($timeslots as $timeslot) -->
<div class="timeslot active">
<input class="timeslotchk" type="checkbox" name="timeslot" value="timeslotID"  checked>
<label>(deliveryDate)</label>
<label>
(deliveryStartTime) - (deliveryEndTime)
</label>
</div>
<div class="timeslot">
<input class="timeslotchk" type="checkbox" name="timeslot" value="timeslotID"> 
<label>(deliveryDate)</label>
<label>
(deliveryStartTime) - (deliveryEndTime)
</label>
</div>
<div class="timeslot">
<input class="timeslotchk" type="checkbox" name="timeslot" value="timeslotID"> 
<label>(deliveryDate)</label>
<label>
(deliveryStartTime) - (deliveryEndTime)
</label>
</div>
<div class="timeslot">
<input class="timeslotchk" type="checkbox" name="timeslot" value="timeslotID"> 
<label>(deliveryDate)</label>
<label>
(deliveryStartTime) - (deliveryEndTime)
</label>
</div>
<!-- @endforeach -->
</div>
</div>
</div>