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

Another way to show and hide buttons

本文关键字:方式 按钮 隐藏 显示 另一种      更新时间:2023-09-26

如果我在驱动器上本地运行文件,以下代码可以正常工作。不幸的是,我需要将此表单上传到一个名为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 --> 

Javascript代码:

 function USAYesNoCheckDO() {
    if (document.getElementById('rbDeathOccurred').checked) {
       document.getElementById('USADOYesNo').style.display = 'block';
     } else {
      document.getElementById('USADOYesNo').style.display = 'none';
      document.getElementsByClassName('USDO')[0].checked = false;
      document.getElementsByClassName('USDO1')[0].checked = false;
      document.getElementById('calc').style.display = 'none';
      document.getElementsByClassName('USDO2')[0].checked = false;
      document.getElementsByClassName('USDO3')[0].checked = false;
      document.getElementById('calc1').style.display = 'none';
      document.getElementsByClassName('USDO4')[0].checked = false;
      document.getElementsByClassName('USDO5')[0].checked = false;
      document.getElementById('calc2').style.display = 'none';
     }
   }

我仍在学习所有这些HTML、Javascript,我刚刚进入JQuery。

如果你需要我把这些代码放在jsfiddle中,请告诉我。

非常感谢

IreneS

更新:

我忘了补充一下,当你选择按钮以及显示和隐藏时,代码在服务器上是有效的——有一件事不起作用,那就是清除所选的按钮。

再次感谢。

更新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);
    }
 }

或者,如果你知道如何解决这个问题。正如我在按钮工作以及问题的显示和隐藏工作之前所提到的,问题是当我想重置并将其设置回原始状态时——空白。

再次感谢您的帮助。

IreneS

更新3:

请任何人对如何解决这个问题有任何想法。

我真的很感激任何帮助。

谢谢你,

IreneS

更新4:

万一有人和我有同样的问题,需要一个解决方案,经过这么长时间的搜索,我终于找到了一个网站,它给了我答案,而且很有效!耶!我只是根据自己的需要定制了编码,它在本地和服务器上都能工作。

http://www.electrictoolbox.com/javascript-clear-form/

IreneS。

对多个元素使用相同的id属性。id在页面上应该是唯一的,只有name可以相同以对相同类型的多个输入元素进行分组。我不知道这是否是主要问题,但这只是一个开始。