样式可见性和JavaScript

style visibility and javascript

本文关键字：JavaScript 可见性 样式      更新时间：2023-09-26

我希望在选择单选按钮时可以看到某个'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>

当选择"是"单选按钮时，ID 为"状态选项"的div 应该可见，当按下"否"单选按钮时，它应该再次隐藏。为了实现这一目标，以下是我的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');
}
按

yes 按钮会显示所需的div，但按 no 按钮也会使其可见，尽管 js 函数中有"else"块。

请解释我在这里错过了什么。

您的 html 无效，因为您在多个元素上使用了相同的 id。这反过来意味着尝试使用 document.getElementById() 选择这些元素并没有真正的意义，因为该方法返回单个元素（或null） - 那么它怎么知道你的意思是哪个元素呢？

对

现有代码进行最小更改以使其正常工作是将单击项的值传递给函数：

<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)"/>

。然后像这样使用它：

function stateGovOptions(val)
{
    if(val == 'yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
        document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}

演示：http://jsfiddle.net/ryxCM/

请注意，通常不会覆盖整个 style 属性来设置一个属性，只会设置有问题的属性：

document.getElementById('stateOptions').style.visibility = 'visible';

演示：http://jsfiddle.net/ryxCM/1/

你甚至需要JS吗？

解开元素的包装允许您使用纯 CSS 执行此操作。

代码笔示例

.CSS 

#stategov1 ~ #stateOptions {
  visibility:hidden;
}
#stategov1:checked ~ #stateOptions {
  visibility:visible;
}

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

然后是基本样式的问题

删除重复的 IDS 后尝试此操作 

document.getElementById('stateOptions').style.visibility=document.getElementsByName('stategov')[0].checked?"visible":"hidden";

您可能希望使用显示块/无来不让div 占用任何空间

试试这个

function stateGovOptions(){
 if(document.getElementById('stategov').value =='yes')
   document.getElementById('stateOptions').setAttribute('style','visibility:visible');
 else        
   document.getElementById('stateOptions').setAttribute('style', 'display:none');
}

ById('stategovfunction stateGovOptions(){
    if(document.getElementById('stategov').value =='yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
相关文章：