ボタンの表示と非表示の別の方法

Question

ドライブ上でファイルをローカルに実行している場合、次のコードは問題なく動作します。残念ながら、このフォームをMasterControlというソフトウェアにアップロードする必要があります。それは動作しません。 MasterControl用のサーバーにアップロードするだけでなく、ローカルにも共通するコーディングの別の方法があるかどうかは疑問でした。

このコードの目的は、最初のレベルの質問で[はい]ボタンをクリックすると、次のレベルの質問が表示されます。最初のレベルでNoボタンをクリックし、次の質問からの質問が表示されている場合は、選択したすべてのボタンがクリアされ、2番目のレベルの質問のセクションが非表示になります。ここで

はコードです：

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を学ぼうと、それは残念ながら、それはしませんでした、私は、この問題を解決を取得する別の方法を提供し、それがサーバー上で動作することになることを期待。私がMasterControlサーバー上にあった他のフォームを見ていて、Jqueryでコード化されていたため、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。

Answer 1

複数の要素に同じid属性を使用します。 idはページ上で一意である必要があります。nameは、同じタイプの複数の入力要素をグループ化する場合と同じにすることができます。私はこれが主要な問題であるかどうかはわかりませんが、それはスタートです。