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

 

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐