In this example we explain that how to show or hide
DIV or panel with Textbox and grouping of control based on RadioButton
selection using JavaScript/jQuery in asp.net.
We all know that that’s type of requirement are
daily work for the any software development like for example if we have two
RadioButton like “self” and “other” in job application form in which if user
selected or checked “other” RadioButton” then and then only show the below
TextBox with DIV element.so how can you have implement.
There are many scenario in which that types of show
or hide group of control based on RadioButton selection (checked/unchecked).
So here we explain that how to show hide DIV when
RadionButton selection is changed.
Below is the JavaScript and jQuery to demonstrate the
show or hide DIV or group of control based on RadioButton selection.
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="ShowHideDiv.aspx.cs" Inherits="ShowHideDiv"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Hide
DIV /Panel with TextBox (Group of Control) based on RadioButton selection
(checked unchecked) using JavaScript and jQuery</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function
ShowHideGroup() {
var
chkYes = document.getElementById("chkYes");
var
dvjobconsulatant = document.getElementById("dvjobconsulatant");
dvjobconsulatant.style.display =
chkYes.checked ? "block" : "none";
}
</script>
<%--For Using Jquery--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function
() {
$("input[name='chkJobConsulatant']").click(function () {
if
($("#chkYes").is(":checked")) {
$("#dvjobconsulatant").show();
} else
{
$("#dvjobconsulatant").hide();
}
});
});
</script>
<span>Do you have
any Reference for this job post?</span><br />
<input type="radio" id="chkYes" name="chkJobConsulatant" onclick="ShowHideGroup()"
/>
Yes
<input type="radio" id="chkNo" name="chkJobConsulatant" onclick="ShowHideGroup()"
/>
No
<hr />
<div id="dvjobconsulatant" style="display: none">
Pleae specify Name of job Consultant:
<input type="text" id="txtjobconsulatant" />
</div>
</form>
</body>
</html>
0 comments:
Post a Comment