Javascript 显示和隐藏按钮的另一种方法

如果在驱动器上本地运行文件，则以下代码可以正常工作。不幸的是，我需要将此表单上载到名为MasterControl的软件。它不起作用。我想知道是否有另一种通用于本地的编码方式，以及上传到MasterControl服务器的方式

此代码的目的是-一旦您单击第一级问题上的“是”按钮，则会出现下一级问题。如果单击第一级上的“否”按钮，并且如果显示下一级问题中的问题，则将清除所有选定按钮并隐藏第二级问题的部分

代码如下：

HTML代码：

 <div id="divDeathOccurred" class="fieldRow">
        <div class="leftLabel labelWidth22">
            <label for="">A. Has a death occurred?</label>
        </div>
        <div class="leftField">
            <div class="formField34">
              <input id="rbDeathOccurred" name="rbDeathOccurred" 
      type="radio" class="radiobuttonfield" title="Death Occurred" 
      value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
              <input id="rbDeathOccurred" name="rbDeathOccurred" 
       type="radio" class="radiobuttonfield" title="Death Occurred" 
       value="No" onclick="javascript:USAYesNoCheckDO();" />No
            </div>
        </div>
    <p>&nbsp;</p>
        <div id="USADOYesNo" style="display:none">
            <ol type="1" class="indentList">
                <li>Is there a reasonable possibility that a device failure
             or malfunction was a direct or indirect factor in the death? 
                    <br>
                    <input id="rbDOYesNo" name="rbDOYesNo" type="radio" 
            class="USDO radiobuttonfield" title="Yes Reportable" value="Yes" 
            onclick="javascript:USDeviceFailure30Days();"  />
                 <label for="rbDOYesNo" class="rptColor">Yes -
                  reportable</label>  
                    <input id="rbDOYesNo" name="rbDOYesNo" type="radio" 
                 class="USDO1 radiobuttonfield" title="No" value="No" 
                onclick="javascript:USDeviceFailure30Days();" />No - No 
               Report   
                    <div id="calc" class="indentListCalc"> 
                     <input id="dt30Days3" type="text" class="textfieldCalc 
                labelWidth25" alt="Device Malfunction" />
                    </div>
                      <p></p>                                                                  
                   </li>
                <li>Is there a reasonable possiblity that a device design 
                defect was direct or indirect factor in the death?
                    <br>
                    <input id="rbDOYesNo1" name="rbDOYesNo1" type="radio" 
           class="USDO2 radiobuttonfield" title="Yes Reportable" value="Yes"
           onclick="javascript:USDeviceDesign30Days();"/>
                    <label for="rbDOYesNo1" class="rptColor">Yes -
             Reportable</label>                     
                     <input id="rbDOYesNo1" name="rbDOYesNo1" type="radio" 
                   class="USDO3 radiobuttonfield" title="No" value="No"
               onclick="javascript:USDeviceDesign30Days();" />No - No Report 
                    <div id="calc1" class="indentListCalc"> 
                     <input id="dt30Days1" type="text" class="textfieldCalc 
                  labelWidth25" alt="Device Design" />
                    </div>
                    <p></p>
                   </li>
                 <li>Is there a reasonable possiblity that the device 
                  labeling was direct or indirect factor in the death?
                     <br>
                    <input id="rbDOYesNo2" name="rbDOYesNo2" type="radio" 
                 class="USDO4 radiobuttonfield" title="Yes Reportable"  
                value="Yes" onclick="javascript:USDeviceLabeling30Days();"/>
                 <label for="rbDOYesNo2" class="rptColor">Yes - 
                  Reportable</label>                          
                      <input id="rbDOYesNo2" name="rbDOYesNo2" type="radio" 
                class="USDO5 radiobuttonfield" title="No" value="No" 
             onclick="javascript:USDeviceLabeling30Days();"/>No - No Report 
                     <div id="calc2" class="indentListCalc"> 
                     <input id="dt30Days2" type="text" class="textfieldCalc
                  labelWidth25" alt="Device Labeling" />
                      <p></p>
                    </div>
                </li> 
            </ol>
        </div>
     </div> <!-- final section Death Occurred end --> 

我仍在学习所有这些HTML、Javascript，我刚刚开始使用JQuery

如果您需要我将这些代码放入JSFIDLE，请告诉我

非常感谢你

艾琳

更新：

我忘了补充一点，当您选择按钮以及显示和隐藏时，代码在服务器上起作用-唯一不起作用的是清除所选按钮

再次感谢你

更新2：

经过几个小时的研究，并试图学习Jquery，希望它能给我另一种方法来解决这个问题，并让它在服务器上工作，不幸的是它没有。我之所以尝试Jquery，是因为我正在查看MasterControl服务器上的其他表单，它们是用Jquery编码的。不幸的是，作为Jquery的初学者，我无法让它在本地驱动器和服务器两方面都工作。请有人检查一下，看看我遗漏了什么或做错了什么

function getChecked(radioGroupName, index)
  {
    var oRadioList = document.getElementsByName(radioGroupName);
    return oRadioList[index].checked;
  }

function setChecked(radioGroupName, index, state)
 {
    var oRadioList = document.getElementsByName(radioGroupName);
    oRadioList[index].checked = state;
 }

function USAYesNoCheckDO()
 {
    if(getChecked("rbDeathOccured",0) == true)
    {
        $('#USADOYesNo').slideDown(1000);   
    }
    else
    {
        $('#USADOYesNo').slideUp(1000); 

        setChecked("rbDOYesNo",0,false);
        setChecked("rbDOYesNo",1,false);

        setChecked("rbDOYesNo1",0,false);
        setChecked("rbDOYesNo1",1,false);

        setChecked("rbDOYesNo2",0,false);
        setChecked("rbDOYesNo2",1,false);
    }
 }

或者如果你知道如何解决这个问题。正如我在前面提到的，按钮起作用，问题的显示和隐藏起作用，问题是当我想重置并将其设置回原始状态-空白时

再次感谢您的帮助

艾琳

更新3：

请大家对如何解决这个问题有任何想法/想法

我真的很感谢你的帮助

谢谢,

艾琳

更新4：

万一有人和我有同样的问题，需要一个解决方案，经过这么长时间的搜索，我终于找到了一个网站，这个网站给了我答案，它工作了！是啊！我只是根据自己的需要定制了编码，它可以在本地和服务器上工作

---

IreneS。

您对多个元素使用相同的

id

属性

id

在页面上应该是唯一的，只有

name

可以是相同的，以便对相同类型的多个输入元素进行分组。我不知道这是否是主要问题，但这是一个开始。

将其放在JSFIDLE中。我们帮助你容易多了。我不是100%地理解这个问题。在我看来，您的问题在于，当您通过名为MasterControl的程序将代码上载到服务器时，代码不起作用？不管怎样，我测试了你的代码，看起来它应该正常工作。你的编码方式是通用的。我们无法真正解决您用来上传代码的应用程序的问题，也无法解决它的运行问题。第二段很混乱，我不明白它应该如何工作。如果第二级仅在选择“是”时显示，为什么在选择“否”时隐藏第二级。用户更改选项时是否考虑到这一点？此表单是否应该循环返回到开始，而不使用提交按钮？Macovei，我为混淆道歉。第一个问题是要求用户单击是或否。如果用户单击否，则不会发生任何事情，也不会显示任何内容，用户将进入下一部分。如果用户单击yes，则会出现下一组问题，用户需要回答这些问题。到目前为止，无论是在本地还是在服务器上，一切都正常。不正常的情况是，万一用户单击“是”，出现下一组问题，用户再次单击“是”或“否”，然后意识到他们应该在第一个问题上单击“否”，如果他们单击“否”，则第二级问题的所有单击按钮应重置并重新隐藏。按钮复位不起作用。我希望这有助于澄清我正在努力解决的问题。Macavi-我知道id必须是唯一的，但不幸的是，这个特定的软件要求按钮的id必须相同，否则它将无法上传。这就是为什么我使用类名而不是id使其唯一。

function getChecked(radioGroupName, index)
  {
    var oRadioList = document.getElementsByName(radioGroupName);
    return oRadioList[index].checked;
  }

function setChecked(radioGroupName, index, state)
 {
    var oRadioList = document.getElementsByName(radioGroupName);
    oRadioList[index].checked = state;
 }

function USAYesNoCheckDO()
 {
    if(getChecked("rbDeathOccured",0) == true)
    {
        $('#USADOYesNo').slideDown(1000);   
    }
    else
    {
        $('#USADOYesNo').slideUp(1000); 

        setChecked("rbDOYesNo",0,false);
        setChecked("rbDOYesNo",1,false);

        setChecked("rbDOYesNo1",0,false);
        setChecked("rbDOYesNo1",1,false);

        setChecked("rbDOYesNo2",0,false);
        setChecked("rbDOYesNo2",1,false);
    }
 }