javascript - 选择复选框中选中的值

Question

喜欢当前的html源

选择“使用时间”并有一个名为“使用时间”的输入复选框。

要继续，请首先在“选择使用时间”中选择值我们希望将所选值应用于“使用时间”。

<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>

例如:

当用户在“选择使用时间”中选择8小时时如果您在“使用时间”输入框中勾选上午 10 点，则列出上午 10 点到晚上 10 点自动从上午 10 点开始，我想通过将“选择使用时间”中选择的 8 小时相加来进行检查。换句话说，如果用户上午 10 点退房，所有内容都会检查到下午 6 点。

另一个例子用户在“选择使用时间”中选择2小时如果您在输入复选框中选中下午 2 点，则会一直选中到下午 4 点。

不一定要在复选框中选中的时间之前

Answer 1

我将为您提供一个工作示例并描述一些代码:

我向选择添加了一个 ID，并向每个选项添加了值，以便我可以在需要时获取该值。

我在所有复选框上添加了更改事件，以便一旦用户选中某个框，我们就可以触发我们的逻辑。

我在复选框上使用了 data-time=""而不是 value=""，因为您使用了 value="11:00"并且我不想将其子串为数字。

此代码在 24 点之后不会返回到 00。

如果您需要我进一步澄清此评论，请在下面评论

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>