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

Question

我在aspx页面上有一组带有相应文本框的单选按钮。 我希望根据其相对单选按钮的选中状态显示或隐藏文本框。

在页面加载期间，我将拉动面板上的所有控件，遍历每个控件，如果typeof是单选按钮，则将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中进行硬编码的，所以我建议您使用客户端代码。 尝试使用输入type =“ radio”代替asp单选按钮。 添加onclick = yourfunction（this）; 注意没有$符号。

一旦触发了onclick事件，您就可以使用clientId（而不是服务器ID）来查找文本框。

示例：var mytextbox = $ get（“ <％= Textbox1.ClientID％>”）;

我希望这有帮助