layui回显复选框单选框问题

蔚落 2023-01-18 04:13 370阅读 0赞

开发的时候  发现layui组件 的监听与回显  需要特殊处理下  如下

>     <div class="layui-form-item">
>         <label class="layui-form-label"><span class="color-warn">*</span>发布对象</label>
>         <div class="layui-input-block">
>             <div>
>                 <input id="all" lay-filter="switchAll" type="radio" name="area" value="2,3,4,5"
>                     title="全部企业" checked>
>             </div>
>             <div>
>                 <input id="part" lay-filter="switchPart" type="radio" name="area" value=""
>                     title="仅行业企业">
>                 <input id="cy" lay-filter="switch" type="checkbox" name="area" value="2" title="餐饮"
>                     lay-skin="primary">
>                 <input id="park" lay-filter="switch" type="checkbox" name="area" value="3" title="停车场"
>                     lay-skin="primary">
>                 <input id="hotel" lay-filter="switch" type="checkbox" name="area" value="4" title="酒店"
>                     lay-skin="primary">
>                 <input id="tour" lay-filter="switch" type="checkbox" name="area" value="5" title="景区旅游"
>                     lay-skin="primary">
>             </div>
>         </div>
>     </div>
> 
>     //监听
>     layui.use(['form', 'layer', 'jquery' ], function () {
>         $ = layui.jquery;
>         var layer = layui.layer,form = layui.form;
>         //监听多选框点击事件  主要是通过 lay-filter="switch"  来监听
>         form.on('checkbox(switch)', function (data) {
>             if( data.elem.checked){　　　　　　//判断当前多选框是选中还是取消选中
>                 $("#all").prop("checked",false);
>                 $("#part").prop("checked",true);
>                 //重新渲染
>                 form.render('radio');
>             }
>         });
>         form.on('radio(switchAll)', function (data) {
>             //判断当前多选框是选中还是取消选中
>             if( data.elem.checked){
>                 //2餐饮 3停车场 4酒店 5景区
>                 $("#part").prop("checked",false);
>                 $("#cy").prop("checked",false);
>                 $("#park").prop("checked",false);
>                 $("#part").prop("checked",false);
>                 $("#tour").prop("checked",false);
>                 //重新渲染
>                 form.render('checkbox');
>                 form.render('radio');　　　　　
>             }
>         });
>         form.on('radio(switchPart)', function (data) {
>             //判断当前多选框是选中还是取消选中
>             if( data.elem.checked){
>                 $("#all").prop("checked",false);
>                 //重新渲染
>                 form.render('radio');
>             }
>         });
>     })

如果是回显渲染的话  只要给中selected  然后

**layui.form.render("select");//下拉框**

**layui.form.render("radio");//单选框**

**layui.form.render("checkbox");//复选框**

既可