Question

当我选择一个单选按钮时，我希望某个'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为'stateoptions'的div，当按下'no'单选按钮时，它应该再次隐藏。为了达到这个目的，我的尝试就是这样。

/* 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'块。

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

Answer 1

您的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/

Answer 2

你甚至需要JS吗？

展开元素允许您使用纯CSS执行此操作。

Codepen Example

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

然后这是基本造型的问题

Answer 3

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

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

您可能希望使用display block / none来使div不占用任何空间

Answer 4

试试这个

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

Answer 5

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

风格可见性和JavaScript

5 个答案: