我有一个foreach循环和javascript切换一周中的几天,然后一个复选框切换时间 - 来自。虽然,如果有两个这样的切换仅适用于顶部切换。
我想弄清楚如何在每个div上分别进行每个切换。我想我需要使用父母,但我不太确定。这也是一个编辑,所以如果选中,我需要在每一个上显示值。
$('input[id="specificTime"]').on('switchChange.bootstrapSwitch', function(event, state) {
$("#specific_on").toggle();
console.log(state); // true | false
});
$('#MonChecked').click(function() {
$("#MonTimes").toggle(this.checked);
});
$('#TueChecked').click(function() {
$("#TueTimes").toggle(this.checked);
});
$('#WedChecked').click(function() {
$("#WedTimes").toggle(this.checked);
});
$('#ThuChecked').click(function() {
$("#ThuTimes").toggle(this.checked);
});
$('#FriChecked').click(function() {
$("#FriTimes").toggle(this.checked);
});
$('#SatChecked').click(function() {
$("#SatTimes").toggle(this.checked);
});
$('#SunChecked').click(function() {
$("#SunTimes").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="height:30px">
<div class="col-md-3 topPadding">
Specific Times
</div>
<div class="col-md-9" style="height:30px">
<!-- <input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" name="specificTime" data-size="small"> -->
<input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" id="specificTime" name="specificTime" data-size="small">
</div>
</div>
<hr>
<div id="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
<?php foreach ($week_days as $day) {
$sday = substr($day,0,3);
?>
<div class="row">
<div class="col-md-1">
<input type="checkbox" class="form-control input-sm" id="<?php echo $sday?>Checked" name="day[]" value="<?php echo $sday?>" data-size="small">
</div>
<div class="col-md-2 topPadding">
<?php echo ucfirst($day) ?>
</div>
<div id="<?php echo $sday?>Times" style="display:none;">
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_from" placeholder="From">
</div>
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_to" placeholder="To">
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div> <!-- End of specific_on -->