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

时间:2016-05-10 18:50:22

标签: javascript jquery html

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

1 个答案:

答案 0 :(得分:0)

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