When a Radio Button is Unchecked, Hide its Connected Element-CodePudding

I'm sorry, the title is awkward. Basically I'm using onclick() to show/hide different elements. When I click Radio1, it shows the element, but when I click Radio2 it doesn't hide Radio1's element, and vice versa. The only way I can think of doing it is doing a manual if statement, like so:

function RadioCheck(id) {
    if (id == 'Radio1') {
        document.getElementById(id).style.display = "table-row-group";
        document.getElementById('Radio2').style.display = "none";
    } else if (id == 'Radio2') {
        document.getElementById(id).style.display = "table-row-group";
        document.getElementById('Radio1').style.display = "none";
    }
}

But when I have to do that for 5 radio buttons, it gets messy and gaudy. I'm not sure how to go about making it so the other elements will hide.

I've tried checking if the the radio with the corresponding is checked/unchecked, to hide/show it. But that doesn't work because obviously once you pass through another parameter, the previous one won't work

I've Googled and can't find it.

Edit: Here's the relevant HTML

Radio HTML

<tr>
    <td>
        <span >Platform:</span>
    </td>
    <td>
        <input type="radio" name="platform" onclick="RadioCheck('Radio1');">Radio1</input>
        <input type="radio" name="platform" onclick="RadioCheck('Radio2');">Radio2</input>
        <input type="radio" name="platform" onclick="RadioCheck('Radio3');">Radio3</input>
        <input type="radio" name="platform" onclick="RadioCheck('Radio4');">Radio4</input>
        <input type="radio" name="platform" onclick="RadioCheck('Radio5');">Radio5</input>
    </td>
</tr>

Radio1 HTML:

<tr id="Radio1">
    <td>
        <span >Limited State:</span>
    </td>
    <td>
        <input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
        <input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
    </td>
</tr>

Radio2 HTML:

<tbody id="Radio2">
<tr>
    <td>
        Locked to Sector?
    </td>
        <td>
        <input type="radio" name="sectorLock" >Yes</input>
        <input type="radio" name="sectorLock" >No</input>
    </td>
</tr>
<tr>
    <td>
        <span >Tech Alert</span>
    </td>
        <td>
        <input type="text" style="width: 100%"></input>
    </td>
</tr>

<tr>
    <td>
        Alerts Portal
    </td>
        <td>
        <input type="text" style="width: 100%"></input>
    </td>
</tr>
<tr>
    <td>
        Reason for Call
    </td>
        <td>
        <input type="text" style="width: 100%"></input>
    </td>
</tr>
<tr>
    <td>
        What exactly is not working?
    </td>
        <td>
        <input type="text" style="width: 100%"></input>
    </td>
</tr>
<tr>
    <td>
        Describe specific web service
    </td>
        <td>
        <input type="text" style="width: 100%"></input>
    </td>
</tr>
</tbody>

And I have my CSS to start the elements off hidden:

#Radio1 {
    display: none;
}
#Radio2 {
    display: none;
}

CodePudding user response：

Here's a method that uses event listeners rather than inline onclick, also uses values for your radios to determine which TR's to show/hide. This example only has content for the first two radios but is extendable for as many as you want.

document.addEventListener('DOMContentLoaded', () => {
  let radios = document.querySelectorAll('.tr-toggle-radios input[type=radio]')
  let toggled = document.querySelectorAll('.tr-toggle-content')
  radios.forEach(el => {
    el.addEventListener('change', e => {
      toggled.forEach(tog => tog.classList.add('hide'));
      document.querySelector(`#${e.target.value}`).classList.remove('hide')
    })
  })
})

.hide {
  display: none;
}

.tr-toggle-content {
display: table-row-group;
}

<table>
  <tr>
    <td>
      <span >Platform:</span>
    </td>
    <td class='tr-toggle-radios'>
      <input type="radio" name="platform" value="Radio1">Radio1</input>
      <input type="radio" name="platform" value="Radio2">Radio2</input>
      <input type="radio" name="platform" value="Radio3">Radio3</input>
      <input type="radio" name="platform" value="Radio4">Radio4</input>
      <input type="radio" name="platform" value="Radio5">Radio5</input>
    </td>
  </tr>

  <tr class='tr-toggle-content hide' id="Radio1">
    <td>
      <span >Limited State:</span>
    </td>
    <td>
      <input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
      <input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
    </td>
  </tr>

  <tbody class='tr-toggle-content hide' id="Radio2">
    <tr>
      <td>
        Locked to Sector?
      </td>
      <td>
        <input type="radio" name="sectorLock">Yes</input>
        <input type="radio" name="sectorLock">No</input>
      </td>
    </tr>
    <tr>
      <td>
        <span >Tech Alert</span>
      </td>
      <td>
        <input type="text" style="width: 100%"></input>
      </td>
    </tr>

    <tr>
      <td>
        Alerts Portal
      </td>
      <td>
        <input type="text" style="width: 100%"></input>
      </td>
    </tr>
    <tr>
      <td>
        Reason for Call
      </td>
      <td>
        <input type="text" style="width: 100%"></input>
      </td>
    </tr>
    <tr>
      <td>
        What exactly is not working?
      </td>
      <td>
        <input type="text" style="width: 100%"></input>
      </td>
    </tr>
    <tr>
      <td>
        Describe specific web service
      </td>
      <td>
        <input type="text" style="width: 100%"></input>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Try this: You keep an array of radio IDs and loop through them when a user interacts with a radio. Then you display the checked radio and hide all the others.

const radio = ['Radio1', 'Radio2', 'Radio3'];
function RadioCheck(id) {
    radio.forEach((item) => {
      if(id === item){
        document.getElementById(id).style.display = "table-row-group";
        }else{
          document.getElementById(item).style.display = "none";
        }
    });
}

CodePudding user response：

You can simply hide everything and then display one instead of adding logic to hide everything except the one that is about to be displayed.

function RadioCheck(id)
{
    // Hide all
    document.getElementById('Radio1').style.display = "none";
    document.getElementById('Radio2').style.display = "none";
    document.getElementById('Radio3').style.display = "none";
    document.getElementById('Radio4').style.display = "none";
    document.getElementById('Radio5').style.display = "none";

    // Display one
    document.getElementById(id).style.display = "table-row-group";
}