多选择和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>