javascript - 在内容更新时保留复选框值

Question

我已经被这个问题困扰了一段时间了。也许你能帮忙。

我有一个表格，每行开头都有一个复选框。我定义了一个定期重新加载表的函数。它在 JSP 上使用 jQuery 的 load() 函数来生成新表。

问题是我需要保留复选框值，直到用户决定选择哪些项目。目前，它们的值在更新之间会丢失。

我当前使用的尝试修复它的代码是:

 refreshId = setInterval(function()
 {
        var allTicks = new Array();
        $('#myTable input:checked').each(function() {
            allTicks.push($(this).attr('id'));
        });
        $('#myTable').load('/get-table.jsp', null,
                function (responseText,textStatus, req ){
            $('#my-table').tablesorter();
            //alert(allTicks + ' length ' + allTicks.length);
            for (i = 0 ; i < allTicks.length; i++ )
                $("#my-table input#" + allTicks[i]).attr('checked', true);

        });
}, $refreshInterval); 

每个复选框的 ID 与其旁边的表条目相同。

我的想法是在更新之前将所有选中的复选框的 id 存储到一个数组中，并在更新完成后更改它们的值，因为大多数条目将被保留，而新的条目将不会真正保留事情。

'#myTable' 是加载表的 div，'#my-table' 是生成的表的 id。复选框输入与新表一起生成，并且具有与之前相同的 id。

奇怪的是，将 tablesorter 应用于新生成的表可以工作，但获取具有存储的 id 的元素却不行。

有什么解决办法吗？

P.S:我知道这种表生成方法并不是最好的，但当时我的 JS 技能有限。我想暂时保留此解决方案并解决问题。

编辑:

应用了 Didier G. 建议的语法，并添加了一些额外的测试 block 来检查复选框勾选之前和之后的状态。

现在看起来像这样:

refreshId = setInterval(function()
    {
        var allTicks = []
        var $myTable = $('#my-table');
        allTicks = $myTable.find('input:checked').map(function() { return this.id; });

        $('#myTable').load('/get-table.jsp', null,
        function (responseText,textStatus, req ){
            $myTable = $('#my-table');
            $('#my-table').tablesorter();
            var msg = 'Before: \n';
            $myTable.find('input').each(function(){
                msg = msg + this.id + " " + $(this).prop('checked') + '\n';
            });
            //alert(msg);
            //alert(allTicks + ' length ' + allTicks.length);
            for (i = 0 ; i < allTicks.length; i++ ){
                 $myTable.find('#' + allTicks[i]).prop('checked', true);
            }
            msg = 'After: '
            $myTable.find('input').each(function(){
                msg = msg + this.id + " " + $(this).prop('checked') + '\n';
            });
            //alert(msg);
        });
    }, $refreshInterval);

如果我取消注释警报行，并选中 2 个复选框，则在下次更新时(对于 3 行表):

Before: host2 false
host3 false
host4 false

object [Object] length 2

After: host2 false
host3 false
host4 false

之前还检查了数组的内容，它具有所有正确的条目。

DOM 更改或使用全新的表实例是否会导致此问题？

编辑2:

下面是 JSP 生成的表的示例(出于保密目的进行了编辑):

<table id="my-table" class="tablesorter">
<thead>
    <tr>
        <th>Full Name</th> 
        <th>IP Address</th> 
        <th>Role</th> 
        <th>Job Slots</th> 
        <th>Status</th>
        <th>Management</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>head</td>
        <td>10.20.1.14</td>
        <td>H</td>
        <td>4</td>
        <td>ON</td>
        <td>Permanent</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="host2" name="host2"/>
            host2
        </td>
        <td>10.20.1.7</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="host3" name="host3"/>
        host3</td>
        <td>10.20.1.9</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="host4" name="host4"/>
        host4</td>
        <td>10.20.1.11</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>

</tbody>
</table>

请注意，复选框的 ID 和名称与主机名一致。另请注意，第一个 td 没有复选框。这是预期的行为。

Answer 1

更改“特殊”属性，例如 disbaled 或 checked 应该像这样完成:

$(...).attr('checked','checked');

如果您使用的是 jQuery 1.6 或更高版本，则采用这种方式:

$(...).prop('checked', true);  // more reliable

请参阅有关 .attr() 的 jQUery 文档和 .prop()

这是经过一些优化修改的代码(查看注释):

refreshId = setInterval(function()
{
    var allTicks = [],
        $myTable = $('#myTable');  // select once and re-use

    // .map() returns an array which is what you are after
    // also never do this: $(this).attr('id').
    // 'id' is a property available in javascript and
    // in .map() (and in .each()), 'this' is the current DOMElement so simply do:
    // this.id

    allTicks = $myTable.find('input:checked').map(function() { return this.id; });

    $myTable.load('/get-table.jsp', null, function (responseText,textStatus, req ) {

        $myTable.tablesorter();

        //alert(allTicks + ' length ' + allTicks.length);
        for (i = 0 ; i < allTicks.length; i++ )
            // avoid prefixing with tagname if you have the ID: input#theId
            // #xxx is unique and jquery will use javascript getElementById which is super fast ;-)
            $myTable.find('#' + allTicks[i]).prop('checked', true);

    });

}, $refreshInterval);