点击单选框按钮实现页面切换

首先在页面实现单选框按钮

<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页面效果

<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页面效果

<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()

            }
        });