Layui 单选按钮隐藏

37 阅读1分钟

image.png

image.png

<form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">安装环境</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="sceneFilter" name="scene" value="1" title="Indoor" checked>
                <input type="radio" lay-filter="sceneFilter" name="scene" value="2" title="Outdoor">
            </div>
        </div>

        <div class="layui-form-item anzhuang2">
            <label class="layui-form-label">安装方式</label>
            <div class="layui-input-block">
                <input class="Indoor1" type="radio" name="install_method" value="1" title="嵌入" checked>
                <input class="Indoor2" type="radio" name="install_method" value="2" title="壁挂">
                <input class="Indoor3" type="radio" name="install_method" value="3" title="吊装">
            </div>
        </div>

        <div class="layui-form-item anzhuang1">
            <label class="layui-form-label">安装方式</label>
            <div class="layui-input-block">
                <input class="Outdoor1" type="radio" name="install_method" value="4" title="楼体壁挂">
                <input class="Outdoor2" type="radio" name="install_method" value="5" title="单立柱">
            </div>
        </div>
 </form>
        <script>
        //顶部Indoor 和 Outdoor切换
        layui.use(['form'], function(){
            var form = layui.form;
            var initValue = $('input[name="scene"]:checked').val();
            isShowScene(initValue);
            // 监听radio选择变化
            form.on('radio(sceneFilter)', function(data){
                isShowScene(data.value);
            });

            // 监听radio选择变化
            form.on('radio(sceneFilter1)', function(data){
                isShowBox(data.value);
            });

            function isShowScene(value){
                $('input[name="install_method"]').prop('checked', false);
                // 重新渲染layui表单
                layui.form.render();
                if(value==1){
                    $('.anzhuang1').hide();
                    $('.anzhuang2').show();
                }else{
                    $('.anzhuang1').show();
                    $('.anzhuang2').hide();
                }
            }
      
        });
    </script>