layui中radio和checkbox控件的使用

1 html标签

 <!--checkbox-->
<div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px;margin-left:-20px">
                        自定义属性:
                    </label>
                    <div class="layui-input-block" id="att" style="width:800px">
                    </div>
                </div>

 <!--radio-->
  <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">评论选项:</label>
                        <div class="layui-input-block">
                            <input type="radio" name="notpost" value="1" title="允许评论">
                            <input type="radio" name="notpost" value="0" title="禁止评论" checked="">
                        </div>
                    </div>
                </div>

2 生成checkbok/radio标签
js

 //加载自定义属性信息
            $.ajax({
                type: "post",
                url: "../../WebApi/DocumentCommon.ashx?action=GetPageList&page=1&limit=10000",
                success: function (res) {
                    var data = JSON.parse(res);
                    if (data.code == '10000') {
                        var html = "";
                        for (var i = 0; i < data.data.length; i++) {
                            if (data.data[i].ParentId == null) {
                                html += `<input type="checkbox" name="att"  value="${data.data[i].att.trim()}" lay-skin="primary" title="${data.data[i].attname} ${data.data[i].att}">`
                            }
                        }

                        $('#att').html(html);
                        form.render();

                    }
                    else {
                        top.layer.msg('异常错误', { icon: 2, time: 2000 }, function () {

                        });
                    }
                }
            })
    //上面生成标签
    //动态赋值选中项
     //将空格替换成逗号,在转成数组
                            if (data.data[0].flag != null) {
                                var flag = data.data[0].flag.split(',');
                                for (var i = 0; i < flag.length; i++) {
                                    $("input[name='att'][value='" + flag[i] + "']").prop("checked", true);
                                }
                            }        

//生产radio标签时,只需要修改type="radio" 
//动态赋值选中项
 $("input[name='notpost'][value=" + data.data[0].notpost + "]").attr("checked", true);

3 获取选中的checkbox/radio

 $('#att .layui-form-checkbox').each(function () {
                    var _taht = $(this);
                    if (_taht.is(".layui-form-checked")) {
                        flag += _taht.prev("input").val() + ',';
                    }
                });

var notpost = $('input:radio[name="notpost"]:checked').val();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值