javascript - 如何在不取消选中的情况下通过 Ajax 更新复选框列表

Question

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

<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>

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

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

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

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

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

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