A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Question

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Currently, I am attempting to display two input boxes in a table when I select specific radio buttons and hide them if I choose another option. The code I have does work but has a minor issue,

function disappear() {
  document.getElementsByClassName("table-custom3")[0].style.display = 'none';
}

function appear() {
  document.getElementsByClassName("table-custom3")[0].style.display = 'block';
}

<table>
  <tr>
    <td class="table-custom2">
      <input type="radio" id="present" name="attendance" onclick="appear()" /</td>
      <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="disappear()" /</td>
        <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
        <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
  </tr>
</table>

The issue with this code is that it only applies to the first user input. I attempted to change from getElementById to getElementsByClassName, but only one textbox appeared. Is there a solution for this problem?

I also came across a Jquery code that seems simpler to execute, but I couldn't find a tutorial on how to apply it to my situation. Any advice on that would be greatly appreciated.

javascript html jquery css

Answer 1

Answer №1

Utilize a loop to toggle the visibility of all elements with a specific class.

Additionally, remember to apply the style inline-block instead of block to keep them on the same row.

function hideElements() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'none');
}

function showElements() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'inline-block');
}

<table>
  <tr>
    <td class="table-custom2">
      <input type="radio" id="present" name="attendance" onclick="showElements()" /></td>
    <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="hideElements()" /></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
  </tr>
</table>

Answer 2

Utilize a loop to toggle the visibility of all elements with a specific class.

Additionally, remember to apply the style inline-block instead of block to keep them on the same row.

function hideElements() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'none');
}

function showElements() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'inline-block');
}

<table>
  <tr>
    <td class="table-custom2">
      <input type="radio" id="present" name="attendance" onclick="showElements()" /></td>
    <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="hideElements()" /></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
  </tr>
</table>

Answer 3

Answer №2

If you're looking for a way to dynamically change the state of a sibling element, one approach is to utilize toggling classes based on the current state.

Here is an example:

.table-custom2.enabled ~ .table-custom3 { display: block; }
.table-custom2.disabled ~ .table-custom3  { display: none; }

function enableSwitch() {
  document.querySelector(".table-custom2").classList.replace("disabled", "enabled");
}

function disableSwitch() {
  document.querySelector(".table-custom2").classList.replace("enabled", "disabled");
}

Answer 4

If you're looking for a way to dynamically change the state of a sibling element, one approach is to utilize toggling classes based on the current state.

Here is an example:

.table-custom2.enabled ~ .table-custom3 { display: block; }
.table-custom2.disabled ~ .table-custom3  { display: none; }

function enableSwitch() {
  document.querySelector(".table-custom2").classList.replace("disabled", "enabled");
}

function disableSwitch() {
  document.querySelector(".table-custom2").classList.replace("enabled", "disabled");
}

Answer 5

Answer №3

To ensure that getElementsByClassName works correctly, it is important to enclose your code within a table tag. Additionally, since getElementsByClassName returns an array of elements, you will need to access them by index as shown below:

[...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});

Here is an example illustrating how this can be implemented:

function absentSwitch() {

    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});

}
function presentSwitch() {
    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = ''});

}

<table>
<tr>
<td class="table-custom2"><input type="radio" id="present" name="attendance" onclick="presentSwitch()" /></td>
<td class="table-custom2"><input type="radio" id="absent" name="attendance" onclick="absentSwitch()" /></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
</tr>
</table>

Answer 6

To ensure that getElementsByClassName works correctly, it is important to enclose your code within a table tag. Additionally, since getElementsByClassName returns an array of elements, you will need to access them by index as shown below:

[...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});

Here is an example illustrating how this can be implemented:

function absentSwitch() {

    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});

}
function presentSwitch() {
    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = ''});

}

<table>
<tr>
<td class="table-custom2"><input type="radio" id="present" name="attendance" onclick="presentSwitch()" /></td>
<td class="table-custom2"><input type="radio" id="absent" name="attendance" onclick="absentSwitch()" /></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
</tr>
</table>

Answer 7

Answer №4

Below is the HTML code snippet for handling multiple inputs in a table:

<table>
    <tr>
      <td class="table-custom2">
        <input type="radio" id="present" name="attendance" onclick="presentSwitch(this) "/></td>
        <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="absentSwitch(this) " /</td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    </tr>
  </table>

Here are the corresponding JavaScript functions:

function absentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'none';
     event.parentElement.parentElement.children[3].style.display = 'none';
}
function presentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'block';
     event.parentElement.parentElement.children[3].style.display = 'block';
}

You are now able to effectively manage multiple input elements within a table.

Answer 8

Below is the HTML code snippet for handling multiple inputs in a table:

<table>
    <tr>
      <td class="table-custom2">
        <input type="radio" id="present" name="attendance" onclick="presentSwitch(this) "/></td>
        <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="absentSwitch(this) " /</td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    </tr>
  </table>

Here are the corresponding JavaScript functions:

function absentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'none';
     event.parentElement.parentElement.children[3].style.display = 'none';
}
function presentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'block';
     event.parentElement.parentElement.children[3].style.display = 'block';
}

You are now able to effectively manage multiple input elements within a table.

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Deleting elements from the DOM in Vue.js

The value returned is undefined when using getStaticProps

Is it possible to manipulate the attribute of an object using Object.defineProperty when a value is passed as a function parameter?

What is the best way to retrieve a property with a period in the method name in JavaScript?

Adding external JavaScript files that rely on jQuery to a ReactJS project

Update HTML element using Jquery periodically

Struggling to get the jQuery resize event to function properly

Encountering a Javascript Error when trying to begin

Customize date filtering in KendoUI grid

Is it possible for a table row's cell to determine the value of the cell in the row above it?

Maintain correct aspect ratio when zooming in the body

The Django CSRF token is inaccessible for retrieval

Having trouble getting the finally clause to work properly in Angular JS version 1.7

Dynamically implementing event listeners in JavaScript to remove specific elements based on their

Access your Vue.js application using Google Sign-In (GIS)

Print Vue page with the same styling as the original

Tips on how to collapse all elements whenever one is being opened in a FAQ card using ReactJS

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

Issue with drop-down menu functionality on mobile-friendly website

Having Trouble Retrieving Environment Variables in Next.js API Endpoints