为什么没有Style.Display =无工作使我的按钮不可见？

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.

我写了一个调用onClick的简单函数。当选择一个按钮时,应该根据该特定选择使下一组按钮可见不可见。我已经尝试了多种方法让它工作,并且它们似乎都没有让按钮在函数运行后变得不可见。

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.

我使用了其中的所有3个,希望其中一个可以工作,然后我可以消除其他两个。

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>

1 个解决方案

#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>