How to Show and Hide div elements using radio buttons?

Today, We want to share with you onclick radio button show hide div javascript.In this post we will show you bootstrap radio button show/hide div, hear for How to show and hide div elements based on the selection of radio buttons in jQuery? we will give you demo and example for implement.In this post, we will learn about
onclick show hide div jquery demo
with an example.

Show hide div on radio button

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

Read Also:  Bootstrap 5 star rating Example

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.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.