Javascript 如何对显示和隐藏具有相同id和名称标记的3个选项的按钮进行编码？_Javascript_Html

Javascript 如何对显示和隐藏具有相同id和名称标记的3个选项的按钮进行编码？

javascript html

Javascript 如何对显示和隐藏具有相同id和名称标记的3个选项的按钮进行编码？,javascript,html,Javascript,Html,我正在使用一个具有3个选项的按钮的表单-预期；想不到的和否。如果单击“预期”或“意外”，则会出现另一个问题。如果单击“否”，则不会显示任何内容，也不会隐藏显示的问题如果我在本地使用此表单，我已经成功了-没问题，只要我为每个按钮使用唯一的id标记。不幸的是，此表单需要上载到一个软件，该软件要求所有3个选项都具有相同的id和名称标签，否则将无法上载我尝试过不同的场景，从使用span尝试获取第三个选项的值或获取前两个选项的值，等等。似乎没有任何效果请注意，任何人都知道如何做到这一点：我正在使

我正在使用一个具有3个选项的按钮的表单-预期；想不到的和否。如果单击“预期”或“意外”，则会出现另一个问题。如果单击“否”，则不会显示任何内容，也不会隐藏显示的问题

如果我在本地使用此表单，我已经成功了-没问题，只要我为每个按钮使用唯一的id标记。不幸的是，此表单需要上载到一个软件，该软件要求所有3个选项都具有相同的id和名称标签，否则将无法上载

我尝试过不同的场景，从使用span尝试获取第三个选项的值或获取前两个选项的值，等等。似乎没有任何效果

请注意，任何人都知道如何做到这一点：

我正在使用HTML和Javascript

谢谢,

艾琳

更新：

HTML代码：

 <div id="divHospitalization" class="fieldRow">
     <div class="leftLabel labelWidth12">
      <label for="txtHospitalization">Hospitalization:</label>
     </div>
     <div class="leftField">
      <div class="formField40"> 
        <input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield" title="Hospitalization"
        value="Expected" onclick="javascript:HospitalOutcome();"
        />Expected
        <input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield" title="Hospitalization"
        value="Unexpected"
        onclick="javascript:HospitalOutcome();" />Unexpected
        <input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield" title="Hospitalization"
        value="No" onclick="javascript:HospitalOutcome();" />No
      </div> 
    </div>
   </div>

   <div class="clearBoth"></div>
   <p></p>                       
   <div id="divHospOutcome" class="fieldRow" style="display:none">
    <div class="leftLabel labelWidth16">
      <label for="txtHospOutcome">Hospitalization Outcome:
      </label>
    </div>
    <div class="leftField">
      <div class="formField40">
        <input id="rbHOutcome" name="rbHOutcome" type="radio"
        class="radiobuttonfield" title="Hospitalization Outcome"
        value="Admitted" />Admitted
        <input id="rbHOutcome" name="rbHOutcome" type="radio"
        class="radiobuttonfield" title="Hospitalization Outcome"
        value="NotAdmited" />Not Admitted/ER Only
      </div> 
    </div>
   </div>

好吧，HTML中的ID应该是唯一的

但是，暂时忽略这一点，您可以为单选按钮分配唯一的类，并改用

document.getElementsByClassName（）

像这样：

<input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield radio1" title="Hospitalization"
        value="Expected" onclick="javascript:HospitalOutcome();"
        />Expected
        <input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield radio2" title="Hospitalization"
        value="Unexpected"
        onclick="javascript:HospitalOutcome();" />Unexpected
        <input id="rbHospital" name="rbHospital" type="radio"
        class="radiobuttonfield radio3" title="Hospitalization"
        value="No" onclick="javascript:HospitalOutcome();" />No

应为
想不到的
不

编辑：JS Fiddle中似乎存在问题。由于某些原因，无法找到单击处理程序。将此代码粘贴到html文件中，应该可以正常工作：

<html>
<head>
  <script>
  function HospitalOutcome(elem) {
      if (hasClass(elem, "radio3") && elem.checked) {
          document.getElementById('divHospOutcome').style.display = 'none';
      } else {
          document.getElementById('divHospOutcome').style.display = 'block';
      }

      function hasClass(element, cls) {
          return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
      }
  }
  </script>
</head>
<body>
  <div id="divHospitalization" class="fieldRow">
  <div class="leftLabel labelWidth12">
    <label for="txtHospitalization">Hospitalization:</label>
  </div>
  <div class="leftField">
    <div class="formField40">
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio1" title="Hospitalization"
      value="Expected" onclick="javascript:HospitalOutcome(this);"
      />Expected
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio2" title="Hospitalization"
      value="Unexpected"
      onclick="javascript:HospitalOutcome(this);" />Unexpected
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio3" title="Hospitalization"
      value="No" onclick="javascript:HospitalOutcome(this);" />No
    </div>
  </div>
</div>

<div class="clearBoth"></div>
<p></p>
<div id="divHospOutcome" class="fieldRow" style="display:none">
  <div class="leftLabel labelWidth16">
    <label for="txtHospOutcome">Hospitalization Outcome:
    </label>
  </div>
  <div class="leftField">
    <div class="formField40">
      <input id="rbHOutcome" name="rbHOutcome" type="radio"
      class="radiobuttonfield" title="Hospitalization Outcome"
      value="Admitted" />Admitted
      <input id="rbHOutcome" name="rbHOutcome" type="radio"
      class="radiobuttonfield" title="Hospitalization Outcome"
      value="NotAdmited" />Not Admitted/ER Only
    </div>
  </div>
</div>
</body>
</html>


功能医院结果（elem）{
if（HASSCLASS（要素，“radio3”）&要素检查）{
document.getElementById（'divhospoutCommand'）.style.display='none'；
}否则{
document.getElementById（'divhospoutCommand'）.style.display='block'；
}
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
}
住院治疗：
预期
想不到的
不

住院结果：
承认
不允许/仅限ER

正如系统在您尝试发布链接时可能指出的那样，您需要在此处显示代码。^^如上所述，尝试通过在代码块中添加链接来解决此问题，只会为您赢得否决票，并有可能被关闭。您应该添加代码的原因是为了其他可能与您有相同问题的人，他们可能会在将来遇到这个问题，但是链接可能不再有用，这使得这个问题在将来对其他人没有任何用处在过去，我将代码放在这里，并收到了使用JSFIDLE的注释。我对这一切都不熟悉。无论哪种方式，我都没有问题。@IreneS如果代码太多，最好两者都做。但是，您不应该只添加一个没有代码的小提琴。顺便说一句，我删除了我的downvotesank，我不知道如何分配唯一的类，请给我一个例子。谢谢你，利奥，我试过了，没用。这是我使用的代码：if（document.getElementsByClassName（'radio3'）.value=“No”）对不起，Leo-它不起作用-第一个按钮起作用，但当单击预期和意外时，它们不会显示第二个问题。getElementsByClassName始终返回一个数组。您需要使用document.getElementsByClassName（'radio3'）[0]

<html>
<head>
  <script>
  function HospitalOutcome(elem) {
      if (hasClass(elem, "radio3") && elem.checked) {
          document.getElementById('divHospOutcome').style.display = 'none';
      } else {
          document.getElementById('divHospOutcome').style.display = 'block';
      }

      function hasClass(element, cls) {
          return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
      }
  }
  </script>
</head>
<body>
  <div id="divHospitalization" class="fieldRow">
  <div class="leftLabel labelWidth12">
    <label for="txtHospitalization">Hospitalization:</label>
  </div>
  <div class="leftField">
    <div class="formField40">
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio1" title="Hospitalization"
      value="Expected" onclick="javascript:HospitalOutcome(this);"
      />Expected
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio2" title="Hospitalization"
      value="Unexpected"
      onclick="javascript:HospitalOutcome(this);" />Unexpected
      <input id="rbHospital" name="rbHospital" type="radio"
      class="radiobuttonfield radio3" title="Hospitalization"
      value="No" onclick="javascript:HospitalOutcome(this);" />No
    </div>
  </div>
</div>

<div class="clearBoth"></div>
<p></p>
<div id="divHospOutcome" class="fieldRow" style="display:none">
  <div class="leftLabel labelWidth16">
    <label for="txtHospOutcome">Hospitalization Outcome:
    </label>
  </div>
  <div class="leftField">
    <div class="formField40">
      <input id="rbHOutcome" name="rbHOutcome" type="radio"
      class="radiobuttonfield" title="Hospitalization Outcome"
      value="Admitted" />Admitted
      <input id="rbHOutcome" name="rbHOutcome" type="radio"
      class="radiobuttonfield" title="Hospitalization Outcome"
      value="NotAdmited" />Not Admitted/ER Only
    </div>
  </div>
</div>
</body>
</html>