对不起，专家们，我今天花了一半时间在谷歌上搜索这个，但可以找到任何有用的解决方案。
我有一个 ID 为 ckRequestReview 的复选框列表控件。此复选框列表控件包含三个项目。
我们的要求是，如果用户单击其中一项，则显示两个与之关联的文本框。
如果用户选中所有三个复选框项，则显示所有六个文本框控件。
到目前为止，只有三个在工作。
这是需要发生的事情:
在页面加载时，默认情况下所有六个文本框控件都是隐藏的。
用户选中 Job Title 复选框项，两个控件 txtTitleChange 和 txtTitle 控件可见。
或者用户选中 Pay Range 复选框项和两个控件，txtPayGradeChange 和 txtPayGrade 可见
或者用户选中 Class 复选框项和两个控件，txtClassSpecChange 和 txtClassification
或者用户选中所有三个复选框项并且所有六个文本框控件都可见。
到目前为止，列出的六个文本框控件中只有这三个控件可以正常工作:
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;" />
</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;" />
</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;" />
</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;" />
</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>
最佳答案
您正确地向您的 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';
}
}
关于javascript - 根据选中的复选框列表项显示或隐藏一个或多个控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32409176/