Question

我在aspx页面上有一组带有相应文本框的单选按钮。我希望文本框显示或隐藏，具体取决于它们的相对单选按钮检查状态。

在页面加载期间，我正在拉动面板上的所有控件，循环遍历每个控件，如果它的typeof是radiobutton，我将javascript函数添加到单选按钮以运行onchange。根据无线电检查状态，该功能将显示或隐藏文本框。我不知道如何根据单选按钮告诉函数隐藏哪个文本框，而不是为单选按钮创建自己的属性并在page_load中使用它。对我来说，这是我提出的最好的解决方案，而不是内置JS函数调用。

但即使这样也行不通。

无论我的代码功能如何，这都不是我想要的。我想从面板中获取一个列表或单选按钮（而不是抓取所有控件），并将功能添加到它。向单选按钮添加属性似乎不是最干净的方式，也不是内置所有调用。无论选择哪种解决方案路径，我仍然需要知道我正在隐藏或显示与单选按钮一起显示的文本框。所以任何和所有的帮助，想法和智慧都将受到赞赏。

HTML：

<div id="divPersonnel" style="margin-right: auto; margin-left: auto; width: 95%;
                display: block; vertical-align: middle;">
                <asp:Panel ID="pnlPersonnel" runat="server">
                    <div style="width: 300px; margin-right: auto; margin-left: auto;">
                        <asp:Table runat="server" BorderStyle="None" ID="tblPersonnelQuerySelect">
                            <asp:TableRow VerticalAlign="Middle">
                                <asp:TableCell>
                                    <asp:RadioButton ID="rdbID" runat="server" textbox="txbID"/>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:Label class="left" ID="lblID" runat="server" Text="ID:" Style=""></asp:Label>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:TextBox class="right" ID="txbID" runat="server"></asp:TextBox>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow VerticalAlign="Middle">
                                <asp:TableCell>
                                    <asp:RadioButton ID="rdbFN" runat="server" textbox="txbFN"/>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:Label class="left" ID="lblFname" runat="server" Text="First Name:" Style=""></asp:Label>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:TextBox class="right" ID="txbFN" runat="server"></asp:TextBox>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow VerticalAlign="Middle">
                                <asp:TableCell>
                                    <asp:RadioButton ID="rdbLN" runat="server" textbox="txbLN"/>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:Label class="left" ID="lblLName" runat="server" Text="Last Name:" Style=""></asp:Label>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:TextBox class="right" ID="txbLN" runat="server"></asp:TextBox>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow VerticalAlign="Middle">
                                <asp:TableCell>
                                    <asp:RadioButton ID="rdbPR" runat="server" textbox="txbPR"/>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:Label class="left" ID="lblRate" runat="server" Text="Pay Rate:" Style=""></asp:Label>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:TextBox class="right" ID="txbPR" runat="server"></asp:TextBox>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow VerticalAlign="Middle">
                                <asp:TableCell>
                                    <asp:RadioButton ID="rdbSD" runat="server" textbox="dtpkrSD"/><br />
                                    <asp:RadioButton ID="rdbED" runat="server" textbox="dtpkrED"/>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:Label class="left" ID="lblStartDate" runat="server" Text="Start Date:" Style=""></asp:Label>
                                    <br />
                                    <asp:Label class="left" ID="lblEndDate" runat="server" Text="End Date:" Style=""></asp:Label>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <input class="right" id="dtpkrSD" onclick="$(this).datepicker();"/><br />
                                    <input class="right" id="dtpkrED" onclick="$(this).datepicker();"/>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </div>
                </asp:Panel>
            </div>

使用Javascript：

function toggletxb(rdb, txb) {
        if ($(rdb).attr('checked') == true) {
            $(txb).show();
        }
        else { $(txb).hide(); }
    }

C＃（在Page_Load中运行）：

Control[] ctrsPersonnel = new Control[pnlPersonnel.Controls.Count];
        pnlPersonnel.Controls.CopyTo(ctrsPersonnel, 0);

        foreach (Control _ctr in ctrsPersonnel)
        {
            if (_ctr.GetType() == typeof(RadioButton))
            {
                ((RadioButton)_ctr).Attributes.Add("onclick", "toggleCheckedState($(this));toggletxb($(this), $(#" + ((RadioButton)_ctr).["textbox"] + ");");
                continue;
            }
            else if (_ctr.GetType() == typeof(TextBox))
            {
                ((TextBox)_ctr).Attributes.Add("onload", "$(this).hide();");
                continue;
            }
            else
            {
                continue;
            }
        }

######编辑############

我最终在数组中使用元素id并循环遍历每个索引以添加属性'onclick'以及该属性的函数。

html保持不变，c＃已被删除。

 //checkbox ids
    var checks = ['<%= chbID.ClientID%>', '<%= chbFN.ClientID%>', '<%= chbLN.ClientID%>', '<%= chbPR.ClientID%>', '<%= chbDtPkrSD.ClientID%>', '<%= chbDtPkrED.ClientID%>',
                        '<%= chbUID.ClientID%>', '<%= chbUsername.ClientID%>', '<%= chbActivityID.ClientID%>', '<%= chbIP.ClientID %>', '<%= chbFormAccessed.ClientID %>', '<%= chbDOA.ClientID %>'];

// text box ids
    var texts = ['<%= txbID.ClientID%>', '<%= txbFN.ClientID%>', '<%= txbLN.ClientID%>', '<%= txbPR.ClientID%>', 'txbDtPkrSD', 'txbDtPkrED',
                        '<%= txbUID.ClientID%>', '<%= txbUsername.ClientID%>', '<%= txbActivityID.ClientID%>', '<%= txbIP.ClientID %>', '<%= txbFormAccessed.ClientID %>', 'dtpkrDOA'];


//loop through each id and add the functions
        for (var i = 0; i < checks.length; i++) {
            $('#' + checks[i]).attr('onclick', 'toggletxb($(this),$("#' + texts[i] + '"))');
            $('#' + texts[i]).hide();
        }

######结束编辑

Answer 1

理查德，

由于你的单选按钮和文本框不是动态生成的，换句话说它们是在html中硬编码的，所以我建议你使用客户端代码。尝试使用input type =“radio”而不是asp单选按钮。添加onclick = yourfunction（this）;注意没有$符号。

onclick事件启动后，您可以使用clientId而不是服务器ID查找文本框。

实施例： var mytextbox = $ get（“＆lt;％= Textbox1.ClientID％＆gt;”）;

我希望这会有所帮助

根据单选按钮检查状态动态隐藏文本框

1 个答案: