ASP.NET如何不用UpdatePanel实现GridView复选框无刷新互斥选中

你可以完全通过前端JavaScript实现复选框互斥逻辑，移除服务端回发逻辑即可实现无刷新效果，具体修改步骤如下：

步骤1：修改GridView前端代码 #

移除CheckBox的AutoPostBack="true"属性和服务端OnCheckedChanged事件绑定，给两个复选框增加自定义CSS类用于前端选择：

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" BackColor="White">
    <Columns>    
        <asp:TemplateField HeaderText="morakhasi" ItemStyle-Width="80">
            <ItemTemplate>
                <asp:CheckBox ID="chkboxMorakhasi" runat="server" CssClass="chk-morakhasi"/>
            </ItemTemplate>
            <HeaderStyle Font-Size="16px" Width="80px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="taiid" ItemStyle-Width="80">
            <ItemTemplate>
                <asp:CheckBox ID="chkboxTaiid" runat="server" Checked="True" CssClass="chk-taiid" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>    
</asp:GridView>

步骤2：添加前端JavaScript互斥逻辑 #

在页面中添加如下JS代码，实现同一行两个复选框的互斥选中效果：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 绑定所有morakhasi复选框的变更事件
    document.querySelectorAll('.chk-morakhasi').forEach(function(chk) {
        chk.addEventListener('change', function() {
            if (this.checked) {
                // 找到当前行的taiid复选框，取消选中
                let row = this.closest('tr');
                row.querySelector('.chk-taiid').checked = false;
            }
        });
    });

    // 绑定所有taiid复选框的变更事件
    document.querySelectorAll('.chk-taiid').forEach(function(chk) {
        chk.addEventListener('change', function() {
            if (this.checked) {
                // 找到当前行的morakhasi复选框，取消选中
                let row = this.closest('tr');
                row.querySelector('.chk-morakhasi').checked = false;
            }
        });
    });
});

如果你的项目使用了jQuery，也可以用更简洁的写法：

$(function() {
    $('.chk-morakhasi').on('change', function() {
        if (this.checked) {
            $(this).closest('tr').find('.chk-taiid').prop('checked', false);
        }
    });
    $('.chk-taiid').on('change', function() {
        if (this.checked) {
            $(this).closest('tr').find('.chk-morakhasi').prop('checked', false);
        }
    });
});

步骤3：删除冗余服务端代码 #

把后台原来的chkboxTaiid_CheckedChanged和chkboxMorakhasi_CheckedChanged两个方法直接删除即可。

注意事项 #

• 前端修改的复选框选中状态会正常保留在视图状态中，提交表单时你依然可以通过原来的FindControl方式在后台获取每个复选框的选中值，逻辑和之前完全一致。
• 该方案完全不需要页面回发，哪怕GridView数据量很大也不会出现卡顿问题，性能远高于服务端回发或者UpdatePanel方案。

内容的提问来源于stack exchange，提问作者farzaneh br