使用PHP Foreach进行Javascript Multiple Div切换

时间:2017-10-06 18:44:14

标签: javascript php jquery html

我有一个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 -->

0 个答案:

没有答案