单选按钮值传输

Question

指向我编码的其他页面的单选按钮的不同链接应该在用户选择一个单选按钮并单击继续后出现。所选单选按钮的链接不应立即打开，因为用户必须先在该页面上输入其他信息。

我已经在单选按钮代码中包含了链接，但它们在选择后立即打开。所以我从我的示例代码中删除了它们。还尝试使用 JavaScript 获取单选按钮的值，但我不知道如何传输它。

<!-- begin radio buttons -->

<div class="panel-variation">

    <div class="panel-body"></div>

        <div class="radio-buttons-variation">

            <ul class="radio-buttons-left">

                <li>

                    <input type="radio" name="selection" id="A" value="Hanna">

                    <label>Hanna</label>

                </li>

                <li>

                    <input type="radio" name="selection" id="B" value="Bryan">

                    <label>Bryan</label>

                </li>

                <li>

                    <input type="radio" name="selection" id="C" value="Alex">

                    <label>Alex</label>

                </li>

            </ul>

            <ul class="radio-buttons-right">

                <li>

                    <input type="radio" name="selection" id="D" value="Gabby">

                    <label>Gabby</label>

                </li>

                <li>

                    <input type="radio" name="selection" id="E" value="Dan">

                    <label>Dan</label>

                </li>

                <li>

                    <input type="radio" name="selection" id="F" value="Ryan"> 

                    <label>Ryan</label>

                </li>

            </ul>

        </div>

    </div>

</div>

<!-- end radio buttons -->

<!-- begin continue button -->

<div class="buttons">

    <a href="#" class="r7-button">continue</a>

</div>

<!-- end continue button -->

// getting the selected radio button value 

function select () {

    document.querySelector('input[name="selection"]:checked').value;

}

//transferring value to continue button

?

我想需要一些 JavaScript，它将单选按钮的选择作为值传输到与继续按钮相关的另一个函数。因此，单击继续按钮后，单选按钮链接将打开。

Answer 1

首先，您需要将一个单击事件侦听器附加到您的继续按钮。在它的回调函数中，您可以检查单选按钮。为此，您可以使用document.getElementsByName("selection")，它返回一个NodeList - 本质上是一个数组 - 所有具有selection名称的元素。现在简单地使用 for 循环遍历数组，看看是否有一个.checked属性为 true的元素并采取相应的行动。下面是一个例子：function check() {var found=false;&nbsp; var inputElements = document.getElementsByName("selection");&nbsp; for (var a = 0; a < inputElements.length; a++) {&nbsp; &nbsp; if (inputElements[a].checked) {&nbsp; &nbsp; &nbsp; console.log(inputElements[a].value + " is checked!");&nbsp; &nbsp; &nbsp; found=true;&nbsp; &nbsp; &nbsp; // continue!&nbsp; &nbsp; }&nbsp; }&nbsp; if(!found)&nbsp; {&nbsp; console.log("nothing selected!");&nbsp; }}document.getElementsByClassName("r7-button")[0].addEventListener("click", check);<!-- begin radio buttons --><div class="panel-variation">&nbsp; <div class="panel-body"></div>&nbsp; <div class="radio-buttons-variation">&nbsp; &nbsp; <ul class="radio-buttons-left">&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="A" value="Hanna">&nbsp; &nbsp; &nbsp; &nbsp; <label>Hanna</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="B" value="Bryan">&nbsp; &nbsp; &nbsp; &nbsp; <label>Bryan</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="C" value="Alex">&nbsp; &nbsp; &nbsp; &nbsp; <label>Alex</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <ul class="radio-buttons-right">&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="D" value="Gabby">&nbsp; &nbsp; &nbsp; &nbsp; <label>Gabby</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="E" value="Dan">&nbsp; &nbsp; &nbsp; &nbsp; <label>Dan</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="selection" id="F" value="Ryan">&nbsp; &nbsp; &nbsp; &nbsp; <label>Ryan</label>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></div><!-- end radio buttons --><!-- begin continue button --><div class="buttons">&nbsp; <a href="#" class="r7-button">continue</a></div>

Answer 2

push()像这样使用函数：var answers = [];// getting the selected radio button value&nbsp;function select () {&nbsp; &nbsp; var answer = document.querySelector('input[name="selection"]:checked').value;&nbsp; &nbsp; answers.push(answer); //transferring value to continue button}// Index marks which question it was so answers[0] would be the first question and&nbsp;answers[1] would be the second如果您需要更多帮助，请询问我。