[英]Javascript set checkbox checked between selected values
Following the code 遵循代码
<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;
}
}
}
What I want to achieve is set the check boxes
as checked between users's selected hours " from_time
" and " to_time
". 我要实现的是将用户选定的小时“
from_time
”和“ to_time
”之间的check boxes
设置为选中状态。
I made it till the point where check boxes get checked based on : 00, :15, :30
or 45 minutes. 我一直到:
00, :15, :30
或45分钟都选中了复选框。 But I'm stuck when the checked boxes should be between selected times. 但是,当复选框在所选时间之间时,我会陷入困境。
So if user chooses 15 minutes and from 06:00 to 14:00 I want every checkbox
which has the value 6:15, 7:15
, 8:15
... 14:15
to be checked. 因此,如果用户选择15分钟,从06:00到14:00,则我希望
checkbox
每个checkbox
,其值分别为6:15, 7:15
: 8:15
... 14:15
。
I tried to compare the " from_time
" and " to_time
" but no luck so far. 我试图比较“
from_time
”和“ to_time
”,但到目前为止还没有运气。
Thank you 谢谢
Why not take a simpler approach... 为什么不采用更简单的方法...
http://codepen.io/anon/pen/jEBQre 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>
I found it. 我找到了。 What I should've done was this
我应该做的是
instead of 代替
if(elem.options[elem.selectedIndex].value == t) {
times[i].checked = true;
}
i changed to 我改为
if(startTime <= times[i].value && stopTime >= times[i].value
&& elem.options[elem.selectedIndex].value == t) {
times[i].checked = true;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.