Introduction:
In this tutorial, we'll explore more about the show and hide div tag based on the radio button list option selection using jQuery. Before we continue with this article I strongly recommend you read my previous articles which are similar to jQuery and how they implemented jQuery as per their requirements.
- Password Validation using jQuery
- Dropdownlist Validation using jQuery
- jQuery Validation on Asp.Net Master Page Control
HTML Markup: Create Page and RadiobuttonList
Let's start with the Asp.Net page. We add a RadioButtonList control to the page and a div tag. The RadioButtonList contains two listitems: the first list item text is "Show" and the value is "1", the second list item text is "Hide" and the value is "2", and the id of the radiobuttonlist is rbl_yes_no.
And adding a div tag with the id "divshow" and by default this div tag is hidden and also applying style to the div, i.e., width: 400px, height: 400px, background-color: #0066cc, and so on.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
----- Add JQuery Code Here -----
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="rbl_yes_no" runat="server" RepeatDirection="Horizontal" Width="250px">
<asp:ListItem Text="Show" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Hide" Value="2" ></asp:ListItem>
</asp:RadioButtonList>
<div id="divshow" style="width:400px; height:400px; background-color:#0066cc; font-size:5em; text-align:center; vertical-align:middle;"> Show Time </div>
</div>
</form>
</body>
</html>
When RadioButtonList is clicked, check which list item is selected. If the selected list item value is "1," then that div tag, which means "divshow," will be visible on the Asp.Net page.
If the selected list item value is "2," then that div tag, which means "divshow," will be hidden on the asp.net page.
JQuery Code:
Now, let's add the JQuery code to handle the RadioButtonList's click event. Based on the selected value, we will show or hide the target div.
<script type="text/javascript">
$(document).ready(function () {
// $('input[name="rbl_soft_training_instit"]').change(function () {
$("table[id*=rbl_yes_no] input").click(function () {
if ($(this).val() == "1") {
$("#divshow").show();
}
else if($(this).val()=="2"){
$("#divshow").hide();
}
});
});
</script>
When the user clicks on RadioButtonList in jQuery, this line of code will execute, i.e., $("table[id*=rbl_yes_no] input"). click(function (){...}.
This jQuery has the ability to access RadioButtonList Listitem object values that can be accessed by using this keywords, as shown in the above code snippet.
if ($(this).val() == "1") {
$("#divshow").show();
}
from both radio buttons which one is clicked that radio button listitem value can be accessed using this piece of code $(this).val(), If show radio button is selected div tag is visible on asp.net page.
else if($(this).val()=="2"){
$("#divshow").hide();
}
If clicked on hide radiobutton list then div tag is hidden on asp.net page.
0 Comments