为什么Style.Display = None无法使我的按钮不可见？

Question

I wrote a simple function that calls onClick. When one button is selected it is supposed to make the next set of buttons visible of invisible based on that particular choice. I have tried multiple ways to get it to work and none of them seem to get the button to become invisible after the function runs.

Here is what I have so far...

function hiddenMess(){

if (document.getElementById('Selection8').checked) {
    document.all('customChoice1').style.visibility = 'hidden';        
    document.getElementById('customChoice1').style.visibility =  'hidden';   
    document.getElementById('customChoice1').style.display = 'none';
}

I used all 3 of these in the hopes one of them would work, and then I could eliminate the other two.

The button it is called from is setup like this

<div class="radio">
  <label><input type="radio" id='Selection8' name="SelectionVal" value="222"  OnClick="hiddenMess()">Test Button 8</label>
</div>
}

This is the button I am trying to make hidden.

<input type="radio" id="customChoice1" name="customDChoice"  value="Hello" > Hello"<br>

Answer 1

Your code is successfully hiding the radio button itself but not the label. Here we target the label, which wraps the radio, instead:

 function hiddenMess(){ if (document.getElementById('Selection8').checked) { document.getElementById('customChoice1').style.display = 'none'; } } 

 <div class="radio"> <label><input type="radio" id='Selection8' name="SelectionVal" value="222" OnClick="hiddenMess()">Test Button 8</label> </div> <br> <hr> <br> <label id="customChoice1"><input type="radio" name="customDChoice" value="Hello">Hello</label>