如何通过 Ajax 更新复选框列表而不取消选中它们答案

【问题标题】：How can I update a list of checkboxes via Ajax without unchecking them如何通过 Ajax 更新复选框列表而不取消选中它们
【发布时间】：2011-09-07 05:54:27
【问题描述】：

考虑以下复选框列表 - 在线用户列表和离线用户列表；

<h1>Users</h1>
<div id="users">
<h2>Online</h2>
<ul>
        <li><input type="checkbox" name="userId[]" value="1" /> Joe Bloggs</li>
        <li><input type="checkbox" name="userId[]" value="2" /> Bill Gates</li>
        <li><input type="checkbox" name="userId[]" value="3" /> John Smith</li>
</ul>
<h2>Offline</h2>
<ul>
        <li><input type="checkbox" disabled="disabled" name="userId[]" value="4" /> The Queen</li>
        <li><input type="checkbox" disabled="disabled" name="userId[]" value="5" /> Steve Jobs</li> 
</ul>
</div>

用户可以检查在线用户，然后执行操作，例如向他们发送（1 个或多个）电子邮件 - 但我需要在用户登录和退出系统时动态更新列表。

我用来每 20 秒左右更新一次列表的代码是这样的；

$("#users").load("/path/to/my/users/load.php");

但这显然只是替换了“用户”div 中的 HTML，并取消选中用户选中的任何“在线”框（如果用户尚未执行该操作，这很烦人）。

简而言之；我正在努力在 jQuery 中编写必要的代码，该代码可以获取在线和离线用户列表，从列表中添加/删除它们，同时在“在线”列表中保持检查值不变。

【问题讨论】：

标签： javascript jquery-ui jquery jquery-selectors

【解决方案1】：

1) 将您的列表包装在一个表单中
2) 序列化选中的复选框
3) 执行 DOM 替换
4) 遍历选中的复选框并重新应用它们

var checked = $('#users form').serializeArray();
//perform ajax call

//in the ajax success function after replacing the DOM
$.each(checked, function(i, data) {
  $('input[name="'+data.name+'"][value="'+data.value+'"]').attr('checked', 'checked');
});

【讨论】：

【解决方案2】：

采取不同的方法：代替.load()，使用$.getJSON() 来检索如下所示的对象：

{
    online: [
        {id: 1, name: 'Joe Bloggs'},
        {id: 2, name: 'Bill Gates'},
        {id: 3, name: 'John Smith'}
    ],
    offline: [
        {id: 4, name: 'The Queen'},
        {id: 5, name: 'Steve Jobs'}
    ]
}

并自行更新 HTML，如果存在该用户 ID 的现有复选框，则使用该复选框。

【讨论】：

这正是我要建议的，+1 更快。

【解决方案3】：

您可以在更改时（onClick）保存在全局变量中，并在 .load 之后使用回调/其他方法重新检查它们。

【讨论】：

【解决方案4】：

使用 ajax 加载在线/离线用户，并根据他们的状态移动元素。我对此的看法：

// Define all users    
var allUsers = {users:[
            {id: 1, name: 'Joe Bloggs'},
            {id: 2, name: 'Bill Gates'},
            {id: 3, name: 'John Smith'},
            {id: 4, name: 'The Queen'},
            {id: 5, name: 'Steve Jobs'}
        ]
    };

    // Define which users are online
    var onlineUser = [2,3,5,12,76];


    $.each(allUsers.users,function(id,user){
        $('<input />').attr('type','checkbox').attr('name','userId[]').val(user.id).attr('disabled','disabled').appendTo($('<li />').text(user.name).appendTo($('#offline')));  

           });






    // function to update which users are online
    function reloadUsers(onlineUsers){
        $('#online li input').attr('disabled','disabled').parent().appendTo($('#offline'));
        $.each(onlineUsers, function(id,user){

            $('#offline [value="'+user+'"]').attr('disabled',false).parent().appendTo($('#online'));
        });

    }
// load online users on document load
reloadUsers(onlineUser);

// just used in the text example to show how to update online users
$("#reload").click(function(){
       reloadUsers($("textarea").val().split(","))
    });

示例：http://jsfiddle.net/niklasvh/4zde9/

【讨论】：