layui 复选框checkbox 选中与回显,单选框radio的选中和回显
一 、html 例句<divstyle="width: 50%"><label class="layui-form-label">经营品类:</label><div ><input lay-filter="switchSap" type="checkbox" lay-skin="primary" name="sap"value="
·
一 、html 例句
<div style="width: 50%">
<label class="layui-form-label">经营品类:</label>
<div >
<input lay-filter="switchSap" type="checkbox" lay-skin="primary" name="sap" value="50" title="护肤">
<input lay-filter="switchSap"type="checkbox" lay-skin="primary" name="sap" value="20" title="彩妆">
<input lay-filter="switchSap" type="checkbox" lay-skin="primary"name="sap" value="10" title="面膜">
<input lay-filter="switchSap"type="checkbox" lay-skin="primary" name="sap" value="40" title="男士">
<input lay-filter="switchSap" type="checkbox" lay-skin="primary" name="sap" value="30" title="个护">
</div>
</div>
二、 监听复选框
// switchSap为页面中复选框lay-filter的值
form.on('checkbox(switchSap)', function (data) {
var sapData = document.getElementById("sapCategoryInput").value;
if (data.elem.checked) { //判断当前多选框是选中还是取消选中
$(this).prop("checked", true);
form.render('checkbox'); // 重新渲染复选框
sapData += data.value + ","
$("#sapCategoryInput").val(sapData)
} else {
var rdata = data.value + ",";
console.log(rdata);
sapData = sapData.replace(rdata, "");
$(this).prop("checked", false);
$("#sapCategoryInput").val(sapData)
form.render('checkbox'); // 重新渲染复选框
}
});
三,编辑时回显
sapCategoryInput的值,如:20,50,
// 给品类设置选中值
if(sapCategoryInput!=null || sapCategoryInput!=""){
var sapCategory =sapCategoryInput.split(',');
var str=document.getElementsByName("sap");
for(var i=0;i<sapCategory.length;i++){
for(var y=0;y<str.length;y++){
if(str[y].defaultValue==sapCategory[i]){
// 给对应的值设定选中状态
$("input:checkbox[value="+str[y].defaultValue+"]").attr("checked","true");
form.render('checkbox');
}
}
}
}
=========================================
一 、单选框 例句
<div class="layui-form-item" pane>
<label class="layui-form-label">是否为省区</label>
<div class="layui-input-block">
<input type="radio" lay-filter="dataType" name="dataType" value="10" title="集团" checked>
<input type="radio" lay-filter="dataType" name="dataType" value="20" title="省区" >
</div>
</div>
二、监听单选框
//监听单选框点击事件
form.on('radio(dataType)', function (data) {
if( data.elem.checked){ //判断当前多选框是选中还是取消选中
if(data.value==10){
// 根据自己的需求处理
$("#ifProvince").val(0)
}else{
// 根据自己的需求处理
$("#ifProvince").val(1)
}
}else{
if(data.value==10){
// 根据自己的需求处理
$("#ifProvince").val(1)
}else{
// 根据自己的需求处理
$("#ifProvince").val(0)
}
}
});
三, 回显
$("[name=dataType]").each(function () {
if(ifProvince==1){
type="20";
}else{
type="10"
}
// 根据值回显
if ($(this).val() == type) {
$(this).attr("checked", "checked");
return false;
}
})
form.render(); //更新全部
更多推荐



所有评论(0)