Show and Hide Div Elements with Radio Buttons in JavaScript

use the jQuery show() and hide() methods to show and hide the div elements based on the selection of radio buttons.

Example : index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons - www.pakainfo.com</title>
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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="colorRadio" value="red"> red</label>
<label><input type="radio" name="colorRadio" value="green"> green</label>
<label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> Online My Web name Pakainfo</div>
<div class="green box">You have selected <strong>green radio button</strong> Online My Web name Pakainfo</div>
<div class="blue box">You have selected <strong>blue radio button</strong> Online My Web name Pakainfo</div>
</body>
</html>

onclick radio button show hide div javascript w3schools

hide div in javascript

function getPtestData() {
var x = document.getElementById("myDIV");

if (x.style.display
=== "none") {
x.style.display = "block";
} else {
x.style.display =
"none";
}
}

js hide element by id

var link = document.getElementById('link-question');
link.style.display = 'none'; //or
link.style.visibility = 'hidden';

I hope you get an idea about onclick radio button show hide div example.

This blog post was originally published at: https://www.pakainfo.com

#javascript #jquery