In this article, you will learn how to show and hide div on radio button selection using jquery or javascript. There are many ways to show or hide div on radio button selections. And we used the show() and hide() function to display the div on radio button selection.
The show() function is used to show the syntax or the element of HTML that you want the user to see. And the hide() function is used to show the syntax or the element of HTML that you want the user to see.
show() works on elements hidden with jQuery methods and display:none in CSS (but it won’t work with CSS property, visibility:hidden).Here are some examples to show or hide div on radio button selections using JQuery or javascript.
In this example, we used the is() function and :checked selector to show or hide the div on radio button selections using jquery. And show() and hide() function used to show or hide the div on radio button selection.
Here is the source code of the program to show or hide the div on radio button selections using is() function and :checked selector in JQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How To Show and Hide Div on Radio Button Selections
Using JQuery or Javascript?</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<label for="chkEmail_yes">
Do you have Email ID?
<input type="radio" id="radio_Email_yes" value="yes" name="radio" />
Yes
<input type="radio" id="radio_Email_no" value="no" name="radio" />
No
</label>
<hr />
<div id="div_email" style="display: none;">
Enter Email ID:
<input type="text" id="txtEmail" />
</div>
<script>
$(function () {
$("input[name='radio']").click(function () {
if ($("#radio_Email_yes").is(":checked")) {
$("#div_email").show();
} else {
$("#div_email").hide();
}
});
});
</script>
</body>
</html>In this example, we are not using any jquery function. This example reference is purely javascript based.
Here is the source code of the program to show or hide the div on radio button selections using the Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How To Show and Hide Div on CheckBox Check or Uncheck Using JQuery or Javascript?</title>
</head>
<body>
<label>
Do you have Email ID?
<input type="radio" id="radio_Email_yes" value="yes" name="radio" onclick="javascript:myFunction();" />
Yes
<input type="radio" id="radio_Email_no" value="no" name="radio" onclick="javascript:myFunction();" />
No
</label>
<hr />
<div id="div_email" style="display: none;">
Enter Email ID:
<input type="text" id="txtEmail" />
</div>
<script>
function myFunction() {
var yes = document.getElementById("radio_Email_yes");
var div_email = document.getElementById("div_email");
if (yes.checked === true) {
div_email.style.display = "block";
} else {
div_email.style.display = "none";
}
}
</script>
</body>
</html>I hope this article will help you to understand how to show or hide div on radio button selections using jquery or javascript
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments