jQuery Ajax 動態加載checkbox，在table裏分兩列加載。

此次是用Ajax + jQuery 動態加載數據庫裏保存的數據。來加載checkbox。而且給這些小東西賦值，取值都會寫下來。

若是有問題，請聯繫我。

說明：項目此次要在一個table里加載這個checkbox組，並且是分兩列加載的

因此我纔會去判斷這個數量和奇偶的東西。雖然奇偶判斷不必定徹底正確，可能也有更簡單的方法。

可是這個估計很好理解是真的。

function Roles() {
jQuery.ajax({ 
 　　　　async: false, cache: false, type: 'POST', dataType: "json", url: "XXXXXXX", //要請求數據的地址 error: function() {//請求失敗處理函數 alert('系統權限Checkbox,加載失敗！'); }, success: function(data) { //請求成功後處理函數。此處的data是JSON對象  if (null !== data && data.length > 0) { var tdfwCon = ""; var index = data.length;//checkbox的總數。下面會判斷總數。 if (index % 2 !== 0) {//奇數，數目爲奇數的時候 for (var i = 0; i < index - 1; i += 2) {//每次循環的時候+2 這樣一行裏就能加載兩條數據了。循環也不會出問題。 tdfwCon += "<tr>"; tdfwCon += "<td><input type='checkbox' id='" + data[i].roleId + "' name='rolesCheckbox' value='" + data[i].roleId + "' class='regular-checkbox' /><span>&nbsp;" + data[i].roleName + "</span></td>"; tdfwCon += "<td><input type='checkbox' id='" + data[i + 1].roleId + "' name='rolesCheckbox' value='" + data[i + 1].roleId + "' class='regular-checkbox' /><span>&nbsp;" + data[i + 1].roleName + "</span></td>"; tdfwCon += "</tr>"; } tdfwCon += "<tr>"; tdfwCon += "<td><input type='checkbox' id='" + data[index - 1].roleId + "' name='rolesCheckbox' value='" + data[index - 1].roleId + "' class='regular-checkbox' /><span>&nbsp;" + data[index - 1].roleName + "</span></td>"; tdfwCon += "</tr>"; tdfwCon += "</tr>"; jQuery("#rolesLists").html(tdfwCon); } else { //偶數，數據是偶數的時候，0也是偶數。 for (var i = 0; i < index; i += 2) {
　　　　　　　　　　　　tdfwCon += "<tr>"; 
　　　　　　　　　　　　tdfwCon += "<td><input type='checkbox' id='" + data[i].roleId + "' name='rolesCheckbox' value='" + data[i].roleId + "' class='regular-checkbox' /><span>&nbsp;" + data[i].roleName + "</span></td>";
　　　　　　　　　　　　tdfwCon += "<td><input type='checkbox' id='" + data[i + 1].roleId + "' name='rolesCheckbox' value='" + data[i + 1].roleId + "' class='regular-checkbox' /><span>&nbsp;" + data[i + 1].roleName + "</span></td>";

　　　　　　　　　　　　tdfwCon += "</tr>";

　　　　　　　　 　} jQuery("#rolesLists").html(tdfwCon);
//加載到哪裏？這要看你本身的HTML代碼了。 
} } else { alert("系統權限爲空，請先添加權限！"); } } }); }

至於裏面的一些元素我也懶得修改了，應該能看懂，我相信。

<table>
      <thead class="lietou">
                <td width="100%" colspan="2">系統權限</td>
      </thead>
      <tbody id="rolesLists">

      </tbody>

</table>

這裏是如何去獲取這裏checkbox的值,若是你要修改保存的話就有用了。

var checkboxs = document.getElementsByName("rolesCheckbox");//獲得這個數組
        var rolesid = "";
        for (var i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked === true) {
                rolesid += checkboxs[i].value + ",";//拼接成爲一個字符串，傳到後臺
            }
        }

這裏是如何將數據庫裏查詢出來要選中的checkbox給選中

function getAreaRoles(rolesid) {
    jQuery.ajax({
        async: false,
        cache: false,
        type: 'POST',
        //dataType: "json", //數據格式自動識別
        data: {nodeid: nodeid},
        url: "getAreaRoles.do", //請求的action路徑
        error: function() {//請求失敗處理函數
            alert('請求失敗！');
        },
        success: function(data) { //請求成功後處理函數。
            console.debug(data);
            if (null !== data && data.length > 0) {
                var roleArray = data.split(",");
                var checkboxs = document.getElementsByName("rolesCheckbox");

                for (var t = 0; t < checkboxs.length; t++) {
                    checkboxs[t].checked = false;
                    for (var i = 0; i < roleArray.length; i++) {

                        if (roleArray[i] === checkboxs[t].value) {
                            checkboxs[t].checked = true;
                        }
                    }
                }
            } else {
                var checkboxs = document.getElementsByName("rolesCheckbox");
                for (var t = 0; t < checkboxs.length; t++) {
                    checkboxs[t].checked = false;
                }
            }
        }
    });
}

整體來說這個不算很難，畢竟之前作過這個東西。

若是對你有用，我和榮幸。