3

当我选择一个单选按钮时，我希望某个“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. 为了实现这一点，下面是我的 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' 块。

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

4

5 回答 5

10

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

于 2013-10-06T05:54:55.657 回答
2

你甚至需要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>

然后是基本样式的问题

于 2013-10-06T08:38:10.437 回答
1

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

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

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

于 2013-10-06T05:53:07.850 回答
1

尝试这个

function stateGovOptions(){
 if(document.getElementById('stategov').value =='yes')
   document.getElementById('stateOptions').setAttribute('style','visibility:visible');
 else        
   document.getElementById('stateOptions').setAttribute('style', 'display:none');
}
于 2014-07-08T07:26:55.663 回答
-1 
ById('stategovfunction stateGovOptions(){
    if(document.getElementById('stategov').value =='yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
于 2016-04-19T10:27:45.493 回答