样式可见性和javascript

我希望当我选择一个单选按钮时，某个“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>

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

---

请解释一下我错过了什么

在删除重复ID后尝试此操作

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

---

您可能希望使用display block/none以避免div占用任何空间

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

演示：

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

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

---

演示：

你需要JS吗

展开元素可以使用纯CSS实现这一点

CSS

HTML

然后是基本样式的问题

试试这个

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

---

重复id。我现在使用name而不是teadhi，只要js与HTML在头部内联，这就非常好用。但是，如果我将js移动到另一个位置，并尝试使用相同的js引用它，则不再有效。有什么想法吗？假设路径是正确的，并且实际找到了文件，它也应该是一样的。尝试使用正斜杠：src=newfolder/scripts.js。否则我不确定问题出在哪里-script.js文件中还有其他内容吗？您没有将实际标记复制到script.js文件中，是吗？您是否在浏览器控制台中报告了任何错误？啊。。我真粗心！正是反斜杠造成了所有的混乱。谢谢你，为我干杯。。我刚刚在这里发布了另一个关于同一项目相关问题的问题@nnnnnn请你也看一下，看看你能不能帮上忙？非常正确，但我对CSS不是很满意。因此JS。实际上，即使在这里，也是CSS在起作用，但我还是更喜欢尽可能少地使用它。从ie7开始

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

#stategov1 ~ #stateOptions {
  visibility:hidden;
}

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

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

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