in this article I will share some examples of how to show and hide a div based on the selected radio button using jQuery. To create such a feature, we can use the methods from jQuery, namely show() and hide().
When creating or building a program, sometimes feature options are also needed. For example, in the contest participant registration form, there is a choice whether to register for yourself or register as a team. When the user selects the register option for himself then the user needs to input the username, but if the user registers as a team then the user needs to input the team name.
Use the jQuery show() and hide() methods
The following example will demonstrate you how to show and hide div elements based on the selection of radio buttons using the jQuery show() and hide() methods. The div boxes in the example are hidden by default using the CSS display property which value is set to none.
Let’s try this example by selecting the different radio buttons and see how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons :
Quickmysupport</title>
<style type="text/css">
.box {
color: #000;
padding: 20px;
display: none;
margin-top: 20px;
}
.card {
background: #a3be8c;
}
.cheque {
background: #eceff4;
}
.wire {
background: #81a1c1;
}
label {
margin-right: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
</head>
<body>
<div>
<label>
<input type="radio" name="paymentType" value="card">
Credit/Debit Card</label>
<label>
<input type="radio" name="paymentType" value="cheque">
Cheque</label>
<label>
<input type="radio" name="paymentType" value="wire">
Wire transfer</label>
</div>
<div class="card box">You have selected
<strong>Credit/Debit Card</strong> so i am here </div>
<div class="cheque box">You have selected
<strong>Cheque</strong> so i am here</div>
<div class="wire box">You have selected
<strong>Wire transfer</strong> so i am here</div>
</body>
</html>I have already written about taking backup of a database through code, in the article How to Backup MySQL Database using PHP and you can download the code and play with it.
Good luck and I hope this article can be useful. See you in the next article…