根据复选框项显示或隐藏一个或多个控件
Show or Hide One or More controls based on Checked checkboxList Item
对不起,专家们,我今天花了一半的时间在谷歌上搜索,但没有找到任何有用的解决方案。
我有一个checkboxList控件与ID称为ckRequestReview。这个checkboxList控件有三个项目。
我们的要求是,如果用户单击其中一个项目,显示与之关联的两个文本框。
如果用户选中了所有三个复选框项,则显示所有六个文本框控件。
到目前为止,只有三个在工作。
下面是需要发生的事情:
在页面加载时,默认情况下所有六个文本框控件都是隐藏的。
用户选中Job Title复选框项,两个控件,txtTitleChange和txtTitle控件可见。
或用户检查支付范围复选框项和两个控件,txtPayGradeChange和txtPayGrade是可见的
OR用户选中Class复选框项和两个控件,txtClassSpecChange和txtClassification
OR User选中所有三个复选框项,并且所有六个文本框控件都可见。
到目前为止,列出的六个文本框控件中只有这三个可以正常工作: 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>
当checkbox被选中或未选中时,其他三个不做任何事情。你知道我做错了什么吗?
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>
你正确地传递了三个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';
}
}
相关文章:
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 引导程序转盘隐藏第一个和最后一个控件
- 如何从另一个控件调用 onclick 事件
- 通过锚标记将另一个控件的客户端 ID 发送到 JavaScript
- 使用 jQuery $.ajax 调用另一个控件的操作
- 非常简单的幻灯片放映,带有上一个和下一个控件
- 自定义指令如何知道它是否已单击另一个控件
- Javascript在onclick上验证两个控件,但如果只有一个控件验证,则不保留值
- jQuery的函数不依赖于另一个控件的值
- 以角度js将值从一个控件传递到另一个控件
- 在切换到asp.net中的另一个控件之前,请验证选项卡中的控件
- 如何向幻灯片添加下一个和上一个控件
- 自定义控件——如何在另一个控件中封装聚合
- 如何在jQuery Mobile中正确地将单选框分组到一个控件
- onclickjavascript将值发送到另一个控件
- 焦点在另一个控件上,但按enter键会按默认按钮
- 在asp.net中输入Key作为Tab并将焦点移动到下一个控件
- 在aspx页面中加载一个又一个控件