When creating or building a program, sometimes a radio input type is required. For example, in the contest participant registration form, there is an option to register as a person or register as a team. When the user selects the register option for personal then the user needs to enter the username, but if the user register as a team then the user need to enter the team name.
Well, in this post I will share an example of how to show and hide a div based on the selected radio button using jQuery. To create this feature, we can use the methods from jQuery, namely show() and hide().
Below I give an example of how to create a show and hide div based on the value of the selected radio button, where at first we create all the style divs with display:none.
Example 1.
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide div elements using radio buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>Show and Hide div based on radio button selection using jquery</p>
<div>
<label><input type="radio" name="type" value="single" />Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<div class="single select">
<label style="color: black">Your Name:</label>
<input type="text" placeholder="Your Name" />
</div>
<div class="team select">
<label style="color: black">Your Team Name:</label>
<input type="text" placeholder="Your Team Name" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var target = $("." + inputValue);
$(".select").not(target).hide();
$(target).show();
alert("Radio button '" + inputValue + "' is selected");
});
});
</script>
</center>
</body>
</html>
Example 2.
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide div elements using radio buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.single {
display: block;
}
.team {
display: none;
}
.select {
color: #fff;
padding: 30px;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>Show and Hide div based on radio button selection using jquery</p>
<div>
<label><input type="radio" name="type" value="single" checked/>Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<div class="single select" id="single">
<label style="color: black">Your Name:</label>
<input type="text" placeholder="Your Name" />
</div>
<div class="team select" id="team">
<label style="color: black">Your Team Name:</label>
<input type="text" placeholder="Your Team Name" />
</div>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
if (inputValue == "team") {
$("#single").hide();
$("#team").show();
} else {
$("#team").hide();
$("#single").show();
}
});
</script>
</center>
</body>
</html>
visit Codelapan.com for more posts and follow us on Twitter.com/codelapan to get the latest information from us. Thanks
Top comments (0)