マルチ選択し、div要素が

Question

まず問題は表示されません。（それが動作しない場合 秒： RadioCheckは、単一選択する必要がありますが、私は、なぜそのマルチ...

第二の問題を知りませんコンソールにエラーが表示されない;？/

、それがどのように動作するかを 私は最初のラジオボタンをクリックし、ラジオのIDを取得する機能と、次のdivを示し、他の 次に、チェックあれば再びラジオボタンと、それは次の買い物をする必要があります。 div（divgazkpz） - これは機能しません。

コード： HTML

<div class="col-xs-6 col-md-4" id="selectbackground"> 
      <form role="form" id="mainForm"> 
       <p>Główny wybór:</p> 
       <label class="radio"> 
        <input type="radio" name="gaz" id="gaz">Gaz 
       </label> 
       <label class="radio"> 
        <input type="radio" name="gazspc" id="gazspc" disabled>Gaz skroplony pod ciśnieniem 
       </label> 
       <label class="radio"> 
        <input type="radio" name="ciecz" id="gazspc" disabled>Ciecz 
       </label> 
       <label class="radio"> 
        <input type="radio" name="gazspc" id="gazsspca" disabled>Gaz skroplony/schłodzony pod ciśnieniem atmosferycznym 
       </label> 

      <button type="button" class="btn btn-primary btn-sm" id="buttonmain" onclick="RadioCheck()">Dalej</button> 
      </form> 

     </div> 

    <!-- Wybór z pola GAZ --> 

     <div class="col-xs-6 col-md-4" id="divgaz" style="display: none;"> 
      <form role="form" id="mainForm"> 
       <p>Gaz:</p> 
       <label class="radio"> 
        <input type="radio" name="gazkpz" id="gazkpz">Katastrofalne pęknięcie zbiornika 
       </label> 
       <label class="radio"> 
        <input type="radio" name="gazws" id="gazws">Wypływ strumieniowy 
       </label> 

      <button type="button" class="btn btn-primary btn-sm" id="buttongazkpzws" onclick="RadioCheck()">Dalej</button> 
      </form>   
     </div> 

    <!-- Gaz : Katastrofalne pęknięcie zbiornika--> 

     <div class="col-xs-6 col-md-4" id="divgazkpz" style="display: none;"> 
      <form role="form" id="mainForm"> 
       <p>Katastrofalne pęknięcie zbiornika:</p> 
       <label class="radio"> 
        <input type="radio" name="gazpk" id="gazpk">Pożar kulisty 
       </label> 
       <label class="radio"> 
        <input type="radio" name="gazwcpg" id="gazwcpg">Powstanie chmury parowej/gazowej 
       </label> 

      <button type="button" class="btn btn-primary btn-sm" id="buttongazpkpwcpg" onclick="RadioCheck()">Dalej</button> 
      </form>   
     </div> 

はJavaScript：

function RadioCheck() 
{ 
    var x = document.getElementById("mainForm").checked; 

    if (x = gaz.checked) 
    { 
     document.getElementById('divgaz').style.display = 'block' ; 
     document.getElementById("buttonmain").setAttribute("disabled", "disabled"); 
    } 
    else if (x = gazkpz.checked) 
    { 
     document.getElementById('divgazkpz').style.display = 'block' ; 
     document.getElementById("buttongazkpzws").setAttribute("disabled", "disabled"); 
    } 
    else 
    { 
     alert('Nic nie wybrales'); 
    } 
} 

function restart() 
{ 
    location.reload(true); 
} 

Answer 1

あなたはnameとvalue属性を混同してきました。

nameは、どのグループが選択されるかを決定するので、グループ内のすべてのラジオボタンは同じ名前を必要とします。次に、それぞれに異なる値を与え、選択した値を取ることができます。

標準のHTMLフォームを作成してサーバーに送信する場合、選択したオプションの値をパラメータとしてかなり自動的に送信する必要があります。あなたがやるだろう（特にとjQuery）JavaScriptでこれを行うには

：

$('button').click(function() { 
 
    var my_value = $('[name=my_option]:checked').val(); 
 
    alert(my_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label><input type="radio" name="my_option" value="option1" /> Option 1</label> 
 
</p> 
 
<p> 
 
    <label><input type="radio" name="my_option" value="option2" /> Option 2</label> 
 
</p> 
 
<p> 
 
    <label><input type="radio" name="my_option" value="option3" /> Option 3</label> 
 
</p> 
 
<p> 
 
    <button>What is selected?</button> 
 
</p>