如何用JavaScript取消选中第一个GridView复选框时移除第二个GridView对应行

我来帮你完善这个功能～你现在已经实现了选中复选框添加行到第二个GridView，只需要补充取消选中时移除对应行的逻辑就行，核心是要让两个GridView的行能精准对应起来，我们可以通过给第二个GridView的行绑定一个唯一标识来实现。

思路说明 #

1. 给从GridView1添加到GridView2的行，绑定一个和原行对应的唯一标识（比如原行的主键值、某个唯一单元格的内容，优先用业务上的唯一值）
2. 当取消选中GridView1的复选框时，根据这个唯一标识找到GridView2里对应的行并移除
3. 额外增加重复添加的判断，避免同一行被多次添加

修改后的完整代码 #

$(function () { 
    // 监听复选框的点击事件
    $('[id*=GridView1] [id*=GridView1_chkRow]').on('click', function () { 
        var $checkbox = $(this);
        var $originalRow = $checkbox.closest('tr');
        // 获取原行的唯一标识（这里假设第一列是业务唯一ID，根据你的实际结构调整eq的索引）
        var rowUniqueId = $originalRow.find('td:eq(0)').text().trim();
        var $targetGrid = $('[id*=gvSelected]');

        if ($checkbox.is(":checked")) { 
            // 先检查目标GridView是否已有该行，避免重复添加
            if (!$targetGrid.find('tr[data-row-id="' + rowUniqueId + '"]').length) {
                // 忽略复选框列，提取其他单元格内容
                var $cells = $originalRow.find('td').not('.IgnoreCheckBoxColumn'); 
                var newRow = '<tr data-row-id="' + rowUniqueId + '">'; 
                for (var i = 0; i < $cells.length; i++) { 
                    newRow += $cells[i].outerHTML; 
                } 
                newRow += '</tr>'; 
                // 将行添加到第二个GridView
                $targetGrid.append(newRow); 
            }
        } else {
            // 取消选中时，根据唯一标识移除目标GridView中的对应行
            $targetGrid.find('tr[data-row-id="' + rowUniqueId + '"]').remove();
        }
    });
});

关键细节解释 #

• data-row-id="' + rowUniqueId + '"：给添加到目标GridView的行加上自定义属性，存储原行的唯一标识，这是实现精准匹配的核心
• rowUniqueId：这里用了原行第一列的文本作为唯一标识，你可以根据实际场景调整——比如有隐藏的ID列就取隐藏列的值，用行索引$originalRow.index()也可以，但索引在分页/排序后可能失效，优先用业务唯一值
• 重复添加判断：避免用户多次点击同一复选框导致重复行，提升交互体验

内容的提问来源于stack exchange，提问作者Oyeboade Tolulope Ronke