How To Show/Hide An Element On Radio Button Selection Using Javascript

There are certain cases when you want to show or hide an element on every click. Here is one of the primary ways to show/hide an element on radio button selection using JavaScript.

Show/hide an element on radio button selection using JavaScript

Using ‘display‘ property

To show or hide an element when we select the radio button: 

First, for each radio button, we will put an id attribute and add an onclick event to call a handler function in Javascript as follows:

<p>How to show/hide an element on radio button selection using Javascript?</p>

<label for="show">Show</label>
<input
 	type="radio"
 	name="showorhide"
 	id="show"
 	value="show"
 	onclick="check()"
/>

<label for="hide">Hide</label>
<input
    type="radio"
    name="showorhide"
    id="hide"
    value="hide"
    onclick="check()"
/>

The element we want to hide/show also sets the id attribute and hide:

<div id="showMessage" style="display: none">
    Welcome to LearnShareIT. LearnshareIT is developed to help students learn and
    share their knowledge more effectively. We connect IT experts and students so
    they can share knowledge and benefit the global IT community.
</div>

<p>We are using display property</p>

In JavaScript code, with the handler function we will check which radio button is selected using getElementById() method. The display property allows you to show or hide an element. If you set “block” values, that element will be displayed, or if you set “none” values, that element will not be displayed. 

function check() {
	if (document.getElementById("show").checked) {
		document.getElementById("showMessage").style.display = "block";
	} else {
		document.getElementById("showMessage").style.display = "none";
	}
}

Output:

Using ‘visibility‘ property

Similar to the display property, the visibility property is also used to show/hide the necessary elements.

visibility: visible – The element is visible.

visibility: hidden – The element is not visible but still affects layout.

You need to note the absolute difference between display: none and visibility: hidden that if you set display: none, it will hide the whole element and not affect on layout, while visibility: hidden means that the element’s content will be hidden, but the element remains in its original position and size.

Here is an example using the visibility property.

<p>How to show/hide an element on radio button selection using Javascript?</p>

<label for="show">Show</label>
<input
    type="radio"
    name="showorhide"
    id="show"
    value="show"
    onclick="check()"
/>

<label for="hide">Hide</label>
<input
    type="radio"
    name="showorhide"
    id="hide"
    value="hide"
    onclick="check()"
/>

<div id="showMessage" style="visibility: hidden">
    Welcome to LearnShareIT. LearnshareIT is developed to help students learn and
    share their knowledge more effectively. We connect IT experts and students so
    they can share knowledge and benefit the global IT community.
</div>

<p>We are using visibility property</p>

And here is the JavaScript code.

function check() {
	if (document.getElementById('show').checked) {
		document.getElementById('showMessage').style.visibility = 'visible';
	} else {
		document.getElementById('showMessage').style.visibility = 'hidden';
	}
}

Output:

Summary

To show/hide an element on radio button selection in JavaScript, you might use the display property or visibility property, depending on your requirement. However, the display properties can lead to cumulative layout changes on the page. They will cause a more significant error because the space is not allocated to the element, which can confuse users. Thank you for reading.

Maybe you are interested:

• Add an ID attribute to an Element using JavaScript
• Show/hide a div element by id using javascript
• Hide an Element by Class using JavaScript

Joni Smith

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.

---

Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css