Reputation: 2615
I'm using ASP and JavaScript. I have a table, checkbox and textbox fields on my page. When the checkbox is checked I want to show the first TextBox and collapse TextBox2 and TextBox3 Table Rows. If the Checkbox is Un-Checked I want to collapse the Table Rows upwards. How can this be done?
For Example:
This is what I tried:
<table>
<tr>
<td>
<asp:CheckBox ID="chkbxUS" runat="server" onchange="validate();" />
</td>
</tr>
<tr id="ParentCountryInfo1">
<td>
<asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox>
</td>
</tr>
<tr id="ParentCountryInfo2">
<td>
<asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox>
</td>
</tr>
<tr id="ParentCountryInfo3">
<td>
<asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox>
</td>
</tr>
<tr>
<td>
Hello World
</td>
</tr>
</table>
<script type="text/javascript">
function validate() {
if (document.getElementById('<%=chkbxUS.ClientID%>').checked) {
document.getElementById('ParentCountryInfo1').style.visibility = 'hidden';
document.getElementById('ParentCountryInfo2').style.visibility = 'hidden';
document.getElementById('ParentCountryInfo3').style.visibility = 'hidden';
} else {
document.getElementById('ParentCountryInfo1').style.visibility = 'visible';
document.getElementById('ParentCountryInfo2').style.visibility = 'visible';
document.getElementById('ParentCountryInfo3').style.visibility = 'visible';
}
}
</script>
Upvotes: 0
Views: 179
Reputation: 1022
If I get your problem right then following code might solve your problem.
<table>
<tr>
<td>
<asp:CheckBox ID="chkbxUS" runat="server" />
</td>
</tr>
<tr id="ParentCountryInfo1">
<td>
<asp:TextBox ID="TextBox1" runat="server">Checked Show Me</asp:TextBox>
</td>
</tr>
<tr id="ParentCountryInfo2">
<td>
<asp:TextBox ID="TextBox2" runat="server">Un-Checked Show ME</asp:TextBox>
</td>
</tr>
<tr id="ParentCountryInfo3">
<td>
<asp:TextBox ID="TextBox3" runat="server">Un-Checked Show ME</asp:TextBox>
</td>
</tr>
<tr>
<td>
Hello World
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#chkbxUS").change(function () {
if ($(this).is(":checked")) {
$("#TextBox1").show();
$("#TextBox2").hide();
$("#TextBox3").hide();
}
else
{
$("#TextBox1").hide();
$("#TextBox2").show();
$("#TextBox3").show();
}
});
});
I hope this helps.
Upvotes: 1