javascript - 多选和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 属性。

名称决定了一组选项的名称，以及将选择其中的一个，因此该组中的所有单选按钮都需要相同的名称。然后，您可以为每一项赋予不同的值，并取所选值的值。

如果您制作一个提交到服务器的标准 HTML 表单，则所选选项的值应该几乎自 Action 为参数发送。

要通过 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>