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

Salmin Skenderovic · Accepted Answer · 2020-03-30 15:57:32Z

2

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>

edited Mar 30, 2020 at 15:57

answered Mar 30, 2020 at 2:28

Salmin Skenderovic

1,73010 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

soria Over a year ago

Thank you for your valuable reply. The code you provided works for you. but, The following cases occur. User A selects 4 times after selecting Select 11:00 through the checkbox The next time, 12:00, 13:00, and 14:00 was selected correctly. So far this is correct. However, when you select 17:00 again, 18:00, 19:00, and 20:00 are selected together. Selected 4 times should be the total number of checkboxes.

soria Over a year ago

The correct operation is shown below. User A selects 4 times after selecting When I selected 11:00 through the checkbox, the next time, 12:00, 13:00, and 14:00 was selected correctly. If you select 17:00 in the above condition, 18:00, 19:00, 20:00 is selected together, Checked before 11:00, 12:00, 13:00, and 14:00 must be unchecked. I wonder if it's possible ...

Salmin Skenderovic Over a year ago

@soria I have edited the answer and introduced function removeAllChecked

Salmin Skenderovic Over a year ago

Ok, so I changed the answer again. I added this:

if (input.disabled) {       removeAllChecked()       alert('There is not enough time. Select a different time, or range')       break;     }

soria Over a year ago

You are a master of javascript. I envy you. Lastly, thank you very much. Have a nice day!!

|

Collectives™ on Stack Overflow

select value checked in checkbox

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related