Флажок Javascript установлен между выбранными значениями

Следуя коду

<select id="choice_option">
    <option value="00">Hourly</option>
    <option value="15">15 minutes</option>
    <option value="30">30 minutes</option>
    <option value="45">45 minutes</option>
</select>

<select id="from_time">
    <option value="6:00">6:00</option>
    <option value="7:00">7:00</option>
    <option value="8:00">8:00</option>
    ...
</select>

<select id="to_time">
    <option value="6:00">6:00</option>
    <option value="7:00">7:00</option>
    <option value="8:00">8:00</option>
    ...
</select>

<input type="checkbox" value="6:00" class="times" />6:00
<input type="checkbox" value="6:00" class="times" />6:15
<input type="checkbox" value="6:00" class="times" />6:30
<input type="checkbox" value="6:00" class="times" />6:45
<input type="checkbox" value="6:00" class="times" />7:00
<input type="checkbox" value="6:00" class="times" />7:15
<input type="checkbox" value="6:00" class="times" />7:30
<input type="checkbox" value="6:00" class="times" />7:45
...
var choice = document.getElementById('choice_option');

Event.add('choice_option', 'change', function() {
    checkTimes(choice);
});

var checkTimes = function(elem) {
    var from = document.getElementById('from_time'),
        to = document.getElementById('to_time'),
        times = document.querySelectorAll('.times'),
        len = times.length,
        i, t, startTime, stopTime;

    for(i = 0; i < len; i++) {
        t = times[i].value.slice(-2);
        startTime = from.options[from.selectedIndex].value;
        stopTime = to.options[to.selectedIndex].value;

        if(times[i].checked) {
            times[i].checked = false;
        }

        if(elem.options[elem.selectedIndex].value == t) {
            times[i].checked = true;
        }
    }
}

Чего я хочу добиться, так это установить check boxes как проверенное между выбранными пользователями часами «from_time» и «to_time».

Я дошел до того момента, когда флажки проверялись на основе: 00, :15, :30 или 45 минут. Но я застрял, когда флажки должны быть между выбранным временем.

Итак, если пользователь выбирает 15 минут и с 06:00 до 14:00, я хочу, чтобы каждый checkbox со значением 6:15, 7:15, 8:15 ... 14:15 проверялся.

Я пытался сравнить "from_time" и "to_time", но пока безуспешно.

Спасибо


javascript checkbox checked
person lesandru    schedule 16.01.2015    source источник
comment
Вы можете использовать jquery в своем проекте?   -  person Rafael    schedule 16.01.2015
comment
Я могу, но я не хочу, так как приложение не требует большого количества javascript, поэтому мне не нужна перегрузка jQuery.   -  person lesandru    schedule 16.01.2015

Ответы (2)


arrow_upward
0
arrow_downward

Почему бы не пойти по более простому пути...

http://codepen.io/anon/pen/jEBQre

<select id="fromHour">
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<select id="fromMinutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
</select>

<span>to</span>

<select id="toHour">
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<select id="toMinutes">
  <option value="00">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
</select>
person Rafael    schedule 16.01.2015
comment
хорошо, хороший совет, но как мне установить флажки между, скажем, 6:15 и 15:15, и убрать 12:15, так как пользователь в это время недоступен? проблема в том, что я не вижу логики в том, как установить флажки в пределах временных рамок - person lesandru; 16.01.2015
comment
вы должны использовать операторы if else, чтобы определить, какие реквизиты отключены на основе выбора пользователя. - person Rafael; 16.01.2015

arrow_upward
0
arrow_downward

Я нашел это. Я должен был сделать это

вместо

if(elem.options[elem.selectedIndex].value == t) {
   times[i].checked = true;
}

я изменился на

if(startTime <= times[i].value && stopTime >= times[i].value 
&& elem.options[elem.selectedIndex].value == t) {
    times[i].checked = true;
}
person lesandru    schedule 16.01.2015