一 、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(); //更新全部
