点击单选框按钮实现页面切换
作者：互联网
首先在页面实现单选框按钮
<div class="layui-form-item">
<label class="layui-form-label" style="margin-left: -15px;">单选框</label>
<div class="layui-input-block marginleft10">
<div class="layui-input-block">
<input type="radio" name="cbmodel" id="aa" value="half" lay-filter="cbmodel" lay-skin="primary" title="单独分配" checked>
<input type="radio" name="cbmodel" id="bb" value="all" lay-filter="cbmodel" lay-skin="primary" title="批量分配">
</div>
</div>
</div>然后写两个div,每个div里面写上需要转换的页面
<div id="batch">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">预定人数:</label>
<div class="layui-input-block">
<input type="text" name="ReservationNumber" autocomplete="off" class="layui-input" value="120">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐时段:</label>
<div class="layui-input-block" >
<select name="mealTime2" lay-filter="mealTime2" id="mealTime2">
<option value=""></option>
<option value="0" selected="">早餐</option>
<option value="1" >中餐</option>
<option value="2">晚餐</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-separateAllocation-startDate" placeholder="yyyy-MM-dd HH-mm-ss">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">用餐形式:</label>
<div class="layui-input-block">
<input type="text" name="ReservationNumber" autocomplete="off" class="layui-input" value="自助餐">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐标准:</label>
<div class="layui-input-block">
<input type="text" id="diningStandard2" name="diningStandard2" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-separateAllocation-endDate" placeholder="yyyy-MM-dd HH-mm-ss">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐备注:</label>
<div class="layui-input-block">
<script type="text/html" template>
<textarea name="remark" autocomplete="off" class="layui-textarea"></textarea>
</script>
</div>
</div>
</div><div id="alone">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">预定人数:</label>
<div class="layui-input-block">
<input type="text" name="ReservationNumber" autocomplete="off" class="layui-input" value="120">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐时段:</label>
<div class="layui-input-block">
<select name="mealTime" lay-filter="mealTime" id="mealTime">
<option value=""></option>
<option value="0" selected="">早餐</option>
<option value="1" >中餐</option>
<option value="2">晚餐</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-restaurantScheduledToAdd-startDate" placeholder="yyyy-MM-ss">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-restaurantScheduledToAdd-startTime" placeholder="HH:mm:ss">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">用餐形式:</label>
<div class="layui-input-block">
<input type="text" name="ReservationNumber" autocomplete="off" class="layui-input" value="自助餐">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐标准:</label>
<div class="layui-input-block">
<input type="text" id="diningStandard" name="diningStandard" autocomplete="off" class="layui-input" value="">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-restaurantScheduledToAdd-endDate" placeholder="yyyy-MM-ss">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Lay-pxxq-pxxq-restaurantScheduledToAdd-endTime" placeholder="HH:mm:ss">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用餐备注:</label>
<div class="layui-input-block">
<script type="text/html" template>
<textarea name="remark" autocomplete="off" class="layui-textarea"></textarea>
</script>
</div>
</div>
</div>然后写上js的代码
var mm= $("#aa").val();
if(mm=="half"){
$("#alone").hide() //显示
$("#batch").show() //隐藏
}else{
$("#batch").hide()
$("#alone").show()
}
layui.form.on('radio(cbmodel)', function (data) {
if(data.value=="half"){
$("#alone").hide()
$("#batch").show()
}else{
$("#batch").hide()
$("#alone").show()
}
});标签：hide,show,用餐,单选框,batch,按钮,alone,页面 来源： https://blog.csdn.net/qq_58148854/article/details/121583101