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

Ways to activate a stylish pop-up box using an input field (when focus is removed)

Searching for nicknames in a worldwide Jest arrangement?

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Inserting data into a Textbox by clicking on a Div

Material UI Grid List rows are displaying with an unusually large gap between them, creating a

Default page featuring an AngularJS modal dialog displayed

Updating nested forms in Angular 4

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Nested promise not being waited for

Retrieve information from every nested array and present it in sequential order

Customize the colors of the arrows in Bootstrap's carousel

Are you seeing empty squares in place of Font Awesome icons?

Odd behavior from CSS

What sets apart the CSS file directories in a React application compared to those in an Express server?

Removing outline from a Material UI button can be done using a breakpoint

Displaying items in the shopping cart across two separate columns

App script: Extracting HTML form data from a web application

Request queuing using jQuery with a time delay

Store the text area content as a JSON object

Implementing Knockout.js with JqueryUI Autocomplete: Access the complete object instead of just the value