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>

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

我每隔20秒左右用来更新列表的代码是这样的;

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

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

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

Answer 1

采用不同的方法：代替.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'}
    ]
}

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

Answer 2

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

Answer 3

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

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

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

4 个答案: