时间戳

首页 > 解决方案 > 选中的 div 上的 Laravel 复选框处于活动状态

javascript - 选中的 div 上的 Laravel 复选框处于活动状态

问题描述

我有一个 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');

                }
            }

标签： javascriptlaravel-8

解决方案

在这里检查一下我修复了你正在尝试的功能。timeslot检查当前 div 时，您的代码没有重置所有其他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>

推荐阅读