我有一个 foreach 循环,我将在其中填充 div 上的时间段 ID、日期和时间。我想要实现的是选中 div 中的复选框后,选定的 div 将突出显示。如果我尝试选中另一个复选框,它将取消选中我选中的前一个复选框。我的 javascript 代码使用本机 javascript。
This is how the checkbox looks like
以下是我的 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');
}
}
答案 0 :(得分:0)
在这里检查这个我修复了你正在尝试的功能。检查当前的 div 时,您的代码并未重置所有其他 timeslot
div。在下面的代码中,更改事件函数 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>