Question

对不起专家，但我今天花了一半时间用Google搜索，但可以找到任何有用的解决方案。

我有一个带有ID的checkboxList控件，名为ckRequestReview。这个checkboxList控件有三个项目。

我们的要求是，如果用户点击其中一个项目，则显示两个与之关联的文本框。

如果用户选中所有三个复选框项，则显示所有六个文本框控件。

到目前为止，只有三个正在发挥作用。

以下是需要发生的事情：

在页面加载时，默认情况下隐藏所有六个文本框控件。

用户选中职务复选框项，两个控件 txtTitleChange 和 txtTitle 控件可见。

或者用户选中付费范围复选框项，两个控件 txtPayGradeChange 和 txtPayGrade 可见

OR用户检查类复选框项和两个控件 txtClassSpecChange 和 txtClassification

OR用户检查所有三个复选框项，并使所有六个文本框控件可见。

到目前为止，只有这六个列出的三个文本框控件才能正常工作：

HTML

<div class="input text" style="float: left;">
    <span style="text-align: left; font-size: x-large; float: left;">Requested Change:</span>
    <div style="float: left; margin-right: 10px; margin-left: 10px">
        <asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title" Style="margin-right: 0px; width: 200px; display: none;" />&nbsp;
    </div>
    <div style="float: left; margin-right: 10px">
        <asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Range" Style="margin-right: 0px; width: 200px; display: none;" />&nbsp;
    </div>
    <div style="float: left; margin-right: 10px">
        <asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class" Style="margin-right: 0px; width: 200px; display: none;" />
    </div>
</div>

当选中或取消选中复选框时，其他三个都不执行任何操作。任何想法我做错了什么？

JS

<script type="text/javascript">
    function ShowHide(chk, txt) {
        //Get the Textbox based on selected checkbox
        ctrltxt = document.getElementById(txt);
        //Check if checkbox is checked or not
        if (chk.checked) {
            //Show the Textbox
            ctrltxt.style.display = 'block';
        } else {
            //Hide the textbox
            ctrltxt.style.display = 'none';
        }
    }
</script>

HTML

<table style="border: 0; border-style: solid">
    <tr valign="top" style="background-color: #f5f7f7; font-size: large; white-space: nowrap;">
        <td style="font-size: large; font-weight: bold;">Request a Review of:</td>
        <td>
            <asp:CheckBoxList ID="ckRequestReview" runat="server" CssClass="cb" Style="border-width: 0;" RepeatDirection="horizontal" RepeatColumns="4" RepeatLayout="Table">
                <asp:ListItem onclick="ShowHide(this,'txtTitleChange','txtTitle');"> Job Title</asp:ListItem>
                <asp:ListItem onclick="ShowHide(this,'txtPayGradeChange','txtPayGrade');">Pay Range</asp:ListItem>
                <asp:ListItem onclick="ShowHide(this,'txtClassSpecChange','txtClassification');">Class</asp:ListItem>
            </asp:CheckBoxList>
        </td>
    </tr>
</table>
<table>
    <tr valign="top">
        <td valign="middle" style="font-size: large; font-weight: bold; border-top: thin solid; text-align: left; white-space: nowrap" class="style4">
            <br />
            <div class="input text" style="float: left;">
                <span style="text-align: left; font-size: x-large; float: left;">Requested Change:</span>
                <div style="float: left; margin-right: 10px; margin-left: 10px">
                    <asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title" Style="margin-right: 0px; width: 200px; display: none;" />&nbsp;
                </div>
                <div style="float: left; margin-right: 10px">
                    <asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Range" Style="margin-right: 0px; width: 200px; display: none;" />&nbsp;
                </div>
                <div style="float: left; margin-right: 10px">
                    <asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class" Style="margin-right: 0px; width: 200px; display: none;" />
                </div>
                <div style="clear: both"></div>
            </div>
            <br />
            <br />
            <br />
        </td>
    </tr>
</table>
<table style="border:0;border-style:solid">
    <tr>
        <td>
            <span style="font-size: X-large; text-align: left;">JUSTIFICATION</span>
            <br />
            <div class="input textarea">
                <table style="border:0;border-style:solid">
                    <tr>
                        <td style="font-size: large;" class="style22">
                            <asp:Label ID="txtTitle" runat="server" Text="Job Title" Style="width: 200px;" Font-Bold="False"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtTitleComments" runat="server" placeholder="Title Change Justification" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td style="font-size: large;" class="style21">
                            <asp:Label ID="txtPayGrade" runat="server" Text="Pay Range" Style="width: 200px;" Font-Bold="False"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtPayComments" placeholder="Pay Grade Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <table style="border:0;border-style:solid">
                    <tr>
                        <td style="font-size: large;" class="style22">
                            <asp:Label ID="txtClassification" runat="server" Text="Class" Style="width: 200px;" Font-Bold="False"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtClassComments" placeholder="Class Specification Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

Answer 1

您正确地将三个parms传递给您的JS，但仅处理2.将其替换为

<script type="text/javascript">
    function ShowHide(chk, txt,txt2) {
        //Get the Textbox based on selected checkbox
        ctrltxt = document.getElementById(txt);
        ctrltxt2= document.getElementById(txt2);
        //Check if checkbox is checked or not
        if (chk.checked) {
           //Show the Textbox
           ctrltxt.style.display = 'block';
           ctrltxt2.style.display = 'block';
         } else {
           //Hide the textbox
           ctrltxt.style.display = 'none';
           ctrltxt2.style.display = 'none';
         }
     }

显示或隐藏基于已选中复选框的一个或多个控件列表项

1 个答案: