How to show and hide div elements based on the selection of radio buttons in jQuery

Show Hide DIV

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.

Show Hide DIV

<!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>

 

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply