设置多选框为单选

两种复选框设置单选框的方法,1,直接绑定asp控件点击事件,2,设置html input控件

asp复选框控件设置单选框:

复制代码
         <asp:CheckBoxList ID="CredentialId" runat="server" RepeatDirection="Horizontal" CssClass="input">
             <asp:ListItem Value="0" Text="外贸提单" onclick="CheckBoxList_Click(this)"></asp:ListItem>
             <asp:ListItem Value="1" Text="外贸合同" onclick="CheckBoxList_Click(this)"></asp:ListItem>
             <asp:ListItem Value="2" Text="报关单" onclick="CheckBoxList_Click(this)"></asp:ListItem>
             <asp:ListItem Value="3" Text="其他" onclick="CheckBoxList_Click(this)"></asp:ListItem>
         </asp:CheckBoxList>


 // 设置服务端控件多选框只能单选
        function CheckBoxList_Click(sender) {
            var container = sender.parentNode;
            if (container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局(默认设置),否则使用流布局 
                container = container.parentNode.parentNode; // 层次: <table><tr><td><input /> 
            }
            var chkList = container.getElementsByTagName("input");
            var senderState = sender.checked;
            for (var i = 0; i < chkList.length; i++) {
                chkList[i].checked = false;
            }
            sender.checked = senderState;
        }
复制代码

html复选框设置单选框:

复制代码
            // 设置单选框
            $("input:checkbox").click(function () {
                var boxArray = document.getElementsByName(this.name);
                for (var i = 0; i <= boxArray.length - 1; i++) {
                    if (boxArray[i] == this && this.checked) {
                        boxArray[i].checked = true;
                    } else {
                        boxArray[i].checked = false;
                    }
                }
            });
 
复制代码

 

posted @   亘古不变  阅读(518)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示