Hiding/Showing div on checking radio:
We can easily hide or display a div by checking the radiobox options using jQuery. We can do this by checking radio options attribute and according to attribute we can hide or show a div.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
textarea{border:2px solid #333;width:340px;border-radius:5px;margin-top:10px;}
</style>
</head>
<body>
<div class="form-group">
<label class="col-sm-5 control-label">Check either Yes or No</label>
<div class="col-sm-7">
<div class="radio radiobtnBox">
<input name="data[User][certificate]" value="Y" class="radio1" required="required" aria-required="true" autocomplete="off" type="radio"><span>Yes</span>
<input name="data[User][certificate]" value="N" class="radio1" required="required" aria-required="true" autocomplete="false" type="radio"><span>No</span>
<div aria-required="true">
<textarea class="form-control radio_check" cols="30" rows="6" required="required" aria-required="true" style="display: block;"></textarea>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(".radio_check").hide();
$(".radio1 ").click(function(){
if($(this).attr("value")=="Y"){
$(".radio_check").css("display","block");
}
else{
$(".radio_check").hide();
}
});
</script>
</html>
In the above example we are displaying the textarea when user will check YES option and hiding when user will select NO with the help of attribute value.
Working example: https://jsfiddle.net/66g52eyg/
0 Comment(s)