bootstrap框架下CheckBox控件的使用方法

王岳
2023-12-01

本来是一件简单的赋值、取值、修改样式,很简单的事情,却花费了我两个多小时才搞定的一个功能。在此记录我遇到的坑。

我需要实现一个动态加载复选框的功能。实现思路是通过ajax获取调用后台代码返回json数据,给相应的位置创建checkbox的html代码。

第一个坑、动态设置CheckBox 后,无渲染

 $.ajax({
            url: "@Url.Action("GetResourceList")?length=" + @int.MaxValue,
            async: true,
            dataType: 'json',
            success: function (data) {
              var divProduct='';
                if (data!=null&&data.code==1&&data.rows != null) {
                    $.each(data.rows, function (i, n) {
                       divProduct+= '<label class="control-label"><input type="checkbox" name="PRODUCT" class="form-control" value="'+ n.ATTRIBUTEID +'"/>'+ n.ATTRIBUTENAME+'</label>'
                      });
                }
$("#divProduct").html(divProduct);
             
}
        });

 

这样设置后,代码没有渲染,显示出来的效果,只有几个复选框,复选框后面的文字也没有显示出来。

需在设置html()后调用uniform()函数,如下所示:

//...
$("#divProduct").html(divProduct);
    $("#divProduct input:checkbox").uniform();
//...

第二个坑,选择多个复选框后,后台只获取到一个值

我的后台使用的是asp.net mvc,普通的控件比如文本框直接设置一个熟悉就能够读取到数据,通过chrome按F12查看post到后台的数据是有多个相同字段,带有不同的值。后台使用一个字段只能获取到最后字段的值,无法获取全部的数据。

正确的方法是:

 Request.Form["PRODUCT"];//需要用这个处理

记录了两个checkbox在使用过程中遇到坑,仅供参考。

 类似资料: