You want to show the item (this item could be any html element or ASP.Net Server control), if the checkbox is checked. If it’s not checked, you want the item should be made hidden.
In the below screenshot, if the user selects the checkbox (if she is a US Citizen), the web application shows text box asking for her SSN number. If it’s unchecked, the textbox will not be shown – as SSN number is irrelevant in this case.
The logic is super simple.
- When user clicks checkbox, we need to get the checked status of checkbox
- If it’s checked, show the item. Else, hide the item
I’ll explain each of the above mentioned steps in detail
1. When user clicks checkbox, we need to get the checked status of checkbox
In this step, you have to do couple of things. First, you need to catch the event – user clicking the checkbox. Then, you need to get the status of checkbox on that event.
Change event of checkbox will be fired when there is a change in the checked status i.e, both when changing from unchecked to checked state and from checked to unchecked state.
You can get the checked status of checkbox when this event happens.
$('#chkUSCitizen').change(function () {
//This part will be executed when status of checkbox is changed
}
You can use this.checked property inside the above code block to get the checked status of check box. Here this represents the currently selected item(chkUSCitizen in our case).
2. If the checkbox is checked, show the item. Else, hide the item.
if (this.checked) {
$('#divSSN').show();
}
else {
$('#divSSN').hide();
}
Complete Code:
Initially, we have to uncheck the checkbox and correspondingly hide the item. Then define the change event function where we show or hide the item based on checkbox checked state.
<script type="text/javascript">
$(document).ready(function () {
//Uncheck the CheckBox initially
$('#chkUSCitizen').removeAttr('checked');
// Initially, Hide the SSN textbox when Web Form is loaded
$('#divSSN').hide();
$('#chkUSCitizen').change(function () {
if (this.checked) {
$('#divSSN').show();
}
else {
$('#divSSN').hide();
}
});
});
</script>
ASPX Page Markup:
<asp:CheckBox ID="chkUSCitizen" runat="server" Text="Are you U.S Citizen?" /> <div id="divSSN" runat="server"> <table> <tr> <td>SSN:</td> <td> <asp:TextBox ID="txtSSN" runat="server"></asp:TextBox> </td> </tr> </table> </div>
Potential Pitfall:
If you want to show/hide the item, you will be tempted to use the visible property of ASP.Net server control at server method to do the same.
Don’t do that.
Doing so will not generate the element itself. For example, if you set visible to false of div server control at any of the server method(E.g, Page Load), ASP.Net will not create that html element itself. So you will not be able to show the element again without going back to the server. If you want to show/hide the control using javascript/jQuery, you should not make Visible property of server control to false.
Thank you for reading the article. If you like this article, please subscribe in the below form.
Leave a Reply