select value checked in checkbox

Question

Like the current html source

Select "use time" and There is an input checkbox called "use time".

To proceed, first select the value in the "Select usage time" We want to apply the selected value to "use time".

<tr>
  <th>use tim choice</th>
  <td id="use_select" class="use_time" colspan="3">
    <div class='timeSelect-wrap'>
      <select>
        <option>2 times</option>
        <option>3 times</option>
        <option>4 times</option>
        <option>5 times</option>
        <option>6 times</option>
        <option>7 times</option>
        <option>8 times</option>
        <option>9 times</option>
        <option>10 times</option>
        <option>11 times</option>
        <option>12 times</option>
      </select>
    </div>
  </td>
</tr>

<tr>
  <th>use tim</th>
  <td id="use_time" class="use_time" colspan="3">
    <div class='timeSelect-wrap'>
      <ul class="timeSelect-list">
          <input type="hidden" name="booking_tmp" value="">
          <li class="timeSelect-recode timeSelect_start">
              <input type="checkbox" name="wr2[]" id="booking[0]" class="booking hand chk_block" value="10:00">
              <label for="booking[0]">
                  <div>10~11</div>
              </label>
          </li>
          <li class="timeSelect-recode timeSelect_start">
              <input type="checkbox" name="wr2[]" id="booking[1]" class="booking hand chk_block" value="11:00">
              <label for="booking[1]">
                  <div>11~12</div>
              </label>
          </li>
          <li class="timeSelect-recode timeSelect_start">
              <input type="checkbox" name="wr2[]" id="booking[2]" class="booking hand chk_block" value="12:00">
              <label for="booking[2]">
                  <div>12~13</div>
              </label>
          </li>
          <li class="timeSelect-recode timeSelect_start">
              <input type="checkbox" name="wr2[]" id="booking[3]" class="booking hand chk_block" value="13:00">
              <label for="booking[3]">
                  <div>13~14</div>
              </label>
          </li>
          <li class="timeSelect-recode timeSelect_start">
              <input type="checkbox" name="wr2[]" id="booking[4]" class="booking hand chk_block" value="14:00">
              <label for="booking[4]">
                  <div>14~15</div>
              </label>
          </li>
          .
          .
          .
          .
          .
      </ul>
    </div>
  </td>
</tr>

For example:

When the user selects 8 hours in the "Select usage time" If you check 10 am in the "Use time" input box listed from 10 am to 10 pm From 10 am automatically, I want to check by adding up the 8 hours selected in "Select usage time". In other words, if the user checks out at 10 am, everything will be checked until 6 pm.

Another example The user selects 2 hours in the "Select usage time" If you check 2pm in the input checkbox, it will be checked until 4pm.

It does not have to be before the time checked in the checkbox

Answer 1

I will give you a working example and describe some code:

I added an ID to the select, and values to each option, so that I can pick up the value when needed.

I added change-events on all checkboxes so that we can trigger our logic once the user checks a box.

I used data-time="" instead of value="" on the checkboxes because you used value="11:00" and I didn't want to substring that into numbers.

This code will not go back to 00 after 24.

Comment below if you need me to clarify this comment further

const inputs = document.querySelectorAll(".times")

inputs.forEach(input => input.addEventListener('change', (e) => {
  if (!e.target.checked) return
  removeAllChecked()
  const selectedTime = document.querySelector("#time-select").value
  const current = e.target.dataset.time

  const endTime = Number(current) + Number(selectedTime)

  for (let i = Number(current); i < endTime; i++) {
  	const input = document.querySelector("input[data-time='"+i+"']");
    if (!input) return;
    if (input.disabled) {
      removeAllChecked()
      alert('There is not enough time. Select a different time, or range')
      break;
    }
    input.checked = true
  }

}))

function removeAllChecked() {
  inputs.forEach(input => input.checked = false)
}

.flex-col {
  display: flex;
  flex-direction: column;
}

<select id="time-select">
   <option value="2">2 times</option>
   <option value="3">3 times</option>
   <option value="4">4 times</option>
 </select>

 <br>

<div class="flex-col">
  
 <label>
   <input type="checkbox" class="times" data-time="10" value="10:00"> 10~11
 </label>

 <label>
   <input type="checkbox" class="times" data-time="11" value="11:00"> 11~12
 </label>

 <label>
   <input type="checkbox" class="times" data-time="12" value="12:00" disabled> 12~13
 </label>

 <label>
   <input type="checkbox" class="times" data-time="13" value="13:00" disabled> 13~14
 </label>


 <label>
   <input type="checkbox" class="times" data-time="14" value="14:00"> 14~15
 </label>
 
  <label>
   <input type="checkbox" class="times" data-time="15" value="15:00"> 15~16
 </label>
 
  <label>
   <input type="checkbox" class="times" data-time="16" value="16:00"> 16~17
 </label>
</div>