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

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:
error

Add a Comment

Your email address will not be published. Required fields are marked *