前提 layui 引入了jq
业务需求:
前端需要动态(ajax)从数据库中获取,时间间隔和半径,后台传给前端两值 time:5 和 radius : 1,
然后通过后台传的值控需要选中的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>
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');
form.render('radio');//类似于渲染数据的意思 必须要加!!!
$("ID").prop("checked", true);
//true ->加checked
//false ->不加checked
码字不易,点个赞再走啊