Html 样式可见性和 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19205852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style visibility and javascript
提问by qre0ct
I would like a certain 'div' to be visible when i select a radio button and would like the same div to get hidden when i select the other radio button. How can i achieve this. Below is my attempt. Please let know what is wrong here.
当我选择一个单选按钮时，我希望某个“div”可见，并希望在我选择另一个单选按钮时隐藏相同的 div。我怎样才能做到这一点。下面是我的尝试。请让我们知道这里出了什么问题。
<label>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
</label>
<p>
<label>Yes</label>
<input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/>
<label>No</label>
<input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/>
</p>
<!-- State govt. ex- employees -->
<div id="stateOptions" style="visibility:hidden">
<label>
<span class="small">Select </span>
</label>
<p>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
<option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
<option value="less">Less than or equal to one year</option>
<option value="between">More then one but less than two years</option>
<option value="more">More than two years</option>
</select>
</p>
</div>
when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. To achieve this below is my js attempt.
when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. 为了实现这一点，下面是我的 js 尝试。
/* displays the contents when state gov ex-employee selected and removes it when not selected */
function stateGovOptions()
{
if(document.getElementById('stategov').value == 'yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}
Pressing the yes button displays the required div, but pressing the no button also makes it visible, despite the 'else' block in the js function.
按 yes 按钮会显示所需的 div，但按 no 按钮也会使其可见，尽管 js 函数中有“else”块。
Please explain what am i missing out here.
请解释我在这里错过了什么。
回答by nnnnnn
Your html is invalid because you've used the same id on multiple elements. Which in turn means that it doesn't really make sense to try to select those elements using document.getElementById(), since that method returns a single element (or null) - so how would it know which element you mean?
您的 html 无效，因为您在多个元素上使用了相同的 id。这反过来意味着尝试使用 选择这些元素没有意义document.getElementById()，因为该方法返回单个元素（或null） - 那么它如何知道您指的是哪个元素？
A minimal change to your existing code to get it to work would be to pass the value of the clicked item to your function:
对现有代码进行的最小更改是将单击项目的值传递给您的函数：
<input type="radio" name="stateGov" value="yes" class="choice"
onClick="stateGovOptions(this.value)"/>
<label>No</label>
<input type="radio" name="stateGov" value="no" class="choice"
onClick="stateGovOptions(this.value)"/>
...and then use it like this:
...然后像这样使用它：
function stateGovOptions(val)
{
if(val == 'yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}
Demo: http://jsfiddle.net/ryxCM/
演示：http: //jsfiddle.net/ryxCM/
Note that normally one wouldn't overwrite the entire styleattribute to set one property, one would set just the property in question:
请注意，通常不会覆盖整个style属性来设置一个属性，只会设置有问题的属性：
document.getElementById('stateOptions').style.visibility = 'visible';
回答by Paulie_D
Do you even need JS for this?
你甚至需要JS吗？
Unwrapping the elements allows you to do this with pure CSS.
展开元素允许您使用纯 CSS 执行此操作。
CSS
CSS
#stategov1 ~ #stateOptions {
visibility:hidden;
}
#stategov1:checked ~ #stateOptions {
visibility:visible;
}
HTML
HTML
<form>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
<label>Yes</label>
<input type="radio" name="stateGov" id="stategov1" value="yes" class="choice"/>
<label>No</label>
<input type="radio" name="stateGov" id="stategov2" value="no" class="choice"/>
<!-- State govt. ex- employees -->
<div id="stateOptions">
<label>
<span class="small">Select </span>
</label>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
<option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
<option value="less">Less than or equal to one year</option>
<option value="between">More then one but less than two years</option>
<option value="more">More than two years</option>
</select>
</div>
</form>
Then it's a matter of basic styling
然后是基本造型的问题
回答by user3489146
Try this
尝试这个
function stateGovOptions(){
if(document.getElementById('stategov').value =='yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style', 'display:none');
}
回答by mplungjan
Try this after removing the duplicate IDS
删除重复的 IDS 后试试这个
document.getElementById('stateOptions').style.visibility=document.getElementsByName('stategov')[0].checked?"visible":"hidden";
You may want to use display block/none to not have the div take up any space
您可能希望使用 display block/none 使 div 不占用任何空间
回答by asa
ById('stategovfunction stateGovOptions(){
if(document.getElementById('stategov').value =='yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
