Multi wählen und div zeigen nicht

Question

Erstes Problem: RadioCheck eine einzige Auswahl sein sollte, aber ich weiß nicht, warum sein Multi ...

Zweites Problem: Sekunde, wenn es nicht (funktioniert Konsole zeigt keine Fehler,?/

Wie sollte es funktionieren ich ersten Radiobutton klicken, wird die Funktion die ID von Radio bekommen und zeige die nächste div nächste sonst, wenn berechne erneut Radiobutton und es sollte einkaufen nächste. div (divgazkpz) - das funktioniert nicht

Code: 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

Sie haben die name und value Attribute verwirrt.

Die name bestimmt, was eine Gruppe von Optionen aufgerufen wird, von denen eine ausgewählt wird, so dass alle Optionsfelder in der Gruppe denselben Namen benötigen. Dann können Sie jedem einen anderen Wert geben und den Wert des ausgewählten Werts übernehmen.

Wenn Sie ein Standard-HTML-Formular erstellen, das an einen Server gesendet wird, sollte der Wert der ausgewählten Option als Parameter ziemlich automatisch gesendet werden.

Um dies zu tun über Javascript (jQuery und speziell) würden Sie tun:

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