layui 点击显示与点击隐藏

Posted 2021-06-08 小月牙

  主要有lay-filter属性，靠这个属性监听

    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
        <div class="grid-demo grid-demo-bg1">
            <div class="layui-form-item">
                <label class="layui-form-label">可看状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_see" lay-filter="is_see" value="0" title="所有"
                           :checked="formData.is_show == 0 ? true : false">
                    <input type="radio" name="is_see" lay-filter="is_see" value="1" title="选择"
                           :checked="formData.is_show == 1 ? true : false">
                </div>
            </div>
        </div>
    </div>
</div>
<!--选择可看到的用户 复选框-->
<div class="layui-row layui-col-space15" id="userinfos">
<label class="layui-form-label"> 选择</label>
<div class="layui-input-block">
    {volist name="userList" id="vo"}
    <input type="checkbox" name="like[{$vo.uid}]" title="{$vo.real_name}">
    {/volist}
</div>
</div>

<script language="javascript">
    layui.use([\'element\',\'form\',\'jquery\'], function(){
        var form = layui.form
            ,element = layui.element
            ,$= layui.$;
        form.on(\'radio(is_see)\', function(data){
//           console.log(data.value); //被点击的radio的value值
            if(data.value == 1){
                $("#userinfos").show();
            }else{
                $("#userinfos").hide();

            }
        });


    });
    </script>