天天看點

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

本來是一件簡單的指派、取值、修改樣式,很簡單的事情,卻花費了我兩個多小時才搞定的一個功能。在此記錄我遇到的坑。

我需要實作一個動态加載複選框的功能。實作思路是通過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在使用過程中遇到坑,僅供參考。