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;
                }
            }
        }
    });
}

总体来說这个不算很难，毕竟以前做过这个东西。

如果对你有用，我和荣幸。