天天看点

好大的坑 ---__--- 最新!!!layui 中 input 单选框 通过后台传值控制选项

前提 layui 引入了jq
           

业务需求:

      前端需要动态(ajax)从数据库中获取,时间间隔和半径,后台传给前端两值  time:5  和 radius : 1,

好大的坑 ---__--- 最新!!!layui 中 input 单选框 通过后台传值控制选项

然后通过后台传的值控需要选中的radio加checked属性

html:

<div class="layui-form-item">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend>基础设置</legend>
                        </fieldset>
                        <label class="layui-form-label" style="width: 230px;">设备上传位置信息时间间隔设置:</label>
                        <div id="time1" class="layui-input-block">
                            <input class="radius1" type="radio" name="time" value="5" title="5分钟"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div></div></div>
                            <input class="radius2" type="radio" name="time" value="10" title="10分钟"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div></div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 120px;">围栏半径设置:</label>
                        <div id="range1" class="layui-input-block">
                            <input class="radius3" type="radio" name="range" value="1" title="1公里" checked="" ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div></div></div>
                            <input class="radius4" type="radio" name="range" value="2" title="2公里"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div></div></div>
                        </div>
                    </div>
           
好大的坑 ---__--- 最新!!!layui 中 input 单选框 通过后台传值控制选项

js:

var t = tick.data[0].time_tick;
                    var r  = radius.data[0].fence_radius;
                    console.log("时间"+t);
                    if(t == 10){// 5分钟
                        $(".radius2").prop("checked", true);
                        $(".radius1").prop("checked", false);
                    }
                    if(t == 5){//10分钟
                        $(".radius1").prop("checked", true);
                        $(".radirus2").prop("checked", false);
                    }
                    console.log("范围"+r);
                    if(r == 2){//2公里
                        $(".radius4").prop("checked", true);
                        $(".radius3").prop("checked", false);
                    }
                    if(r == 1){// 1公里
                        $(".radius3").prop("checked", true);
                        $(".radirus4").prop("checked", false);
                    }
                    form.render('radio');
           
好大的坑 ---__--- 最新!!!layui 中 input 单选框 通过后台传值控制选项
form.render('radio');//类似于渲染数据的意思  必须要加!!!
           
$("ID").prop("checked", true);

//true ->加checked
//false ->不加checked
           

码字不易,点个赞再走啊