如何在jQuery中传递复选框选中状态至DataTables表格

现有一个添加用户的模态表单，提交后数据会插入到DataTables表格中。目前姓名字段已能正常传递，但模态框里复选框的选中/未选中状态无法同步到表格对应行的复选框上。

原模态表单代码 #

<div id="addUser" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div>
                <label>Full Name</label>
                <div>
                    <input class="form-control" id="fullname" type="text" required/>
                </div>
            </div>

            <div >
                <label>Permissions</label>
                <div>
                    <input type="checkbox" id="add" value="Add" data-parsley-multiple="status">
                    <label>Add</label>
                    <input type="checkbox" id="edit" value="Edit" data-parsley-multiple="status">
                    <label>Edit</label>
                    <input type="checkbox" id="delete" value="Delete" data-parsley-multiple="status">
                    <label>Delete</label>
                </div>
            </div>
            
            <div>
                <div class="col-12">
                    <button class="btn" id="saveUser">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

原JS代码 #

$("#saveUser").click(function () {
    t.row.add(['', 
        '<input class="form-control" type="text" name="fullname[]" value="'+$("#fullname").val()+'" readonly>',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#add").val()+'" data-parsley-multiple="status">',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#edit").val()+'" data-parsley-multiple="status">',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#delete").val()+'" data-parsley-multiple="status">',
    ]).draw(false); 
});

修改方案 #

要实现选中状态同步，只需在生成表格复选框时，根据模态框对应复选框的选中状态动态添加checked属性。修改后的JS代码如下：

$("#saveUser").click(function () {
    // 获取模态框中复选框的选中状态
    const isAddChecked = $("#add").is(":checked") ? "checked" : "";
    const isEditChecked = $("#edit").is(":checked") ? "checked" : "";
    const isDeleteChecked = $("#delete").is(":checked") ? "checked" : "";

    t.row.add(['', 
        '<input class="form-control" type="text" name="fullname[]" value="'+$("#fullname").val()+'" readonly>',
        `<input class="form-control" type="checkbox" name="permissions[]" value="${$("#add").val()}" ${isAddChecked} data-parsley-multiple="status">`,
        `<input class="form-control" type="checkbox" name="permissions[]" value="${$("#edit").val()}" ${isEditChecked} data-parsley-multiple="status">`,
        `<input class="form-control" type="checkbox" name="permissions[]" value="${$("#delete").val()}" ${isDeleteChecked} data-parsley-multiple="status">`,
    ]).draw(false); 

    // 可选：清空模态框表单，方便下次添加
    $("#fullname").val('');
    $("#add, #edit, #delete").prop('checked', false);
});

说明 #

• 使用$("#id").is(":checked")判断复选框是否被选中，选中则返回checked字符串，否则返回空字符串
• 用模板字符串（反引号）拼接HTML，更清晰地插入动态属性
• 可选添加表单清空逻辑，提升用户操作体验

内容的提问来源于stack exchange，提问作者boldsinas101