多選擇和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表單，則所選選項的值應該幾乎自動作爲參數發送。

要通過JavaScript做到這一點（和jQuery明確），你會怎麼做：

$('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>