選擇復選框中選中的值

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 點退房，那么一切都將被檢查到下午 6 點。

另一個例子用戶在“選擇使用時間”中選擇2小時如果在輸入復選框中選中2pm，它將被選中到4pm。

它不必在復選框中選中的時間之前

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>