选择复选框和 'Next' 按钮后重定向到 link

Question

我需要在用户 select 一个复选框并且仅在单击 'next' 按钮之后将用户重定向到一个页面（多个选项）。这是我的带有三个复选框的代码（抱歉我还不能添加图片：

          <form class="q2" action="">
                <div class="form-group radios">
                    <label for="1">
                    <input type="radio" name="physio" id="1"><span class="checkmark"></span>
                        Mark
                    </label> 
                </div> 
                <div class="form-group radios">
                    <label for="2">
                    <input type="radio" name="physio" id="2"><span class="checkmark"></span>
                        John
                    </label>
                </div>
                <div class="form-group radios">
                    <label for="3">
                    <input type="radio" name="physio" id="3"><span class="checkmark"></span>
                        Jack 
                    </label>
                </div>
            </form>

                <a href="poids-ideal-chat.html">
                    <div class="button-icon next cta src">
                        <p>
                            Next 
                        </p>
                    </div>
                </a>

谢谢你帮助别人

Answer 1

为此，您可以使用 javascript。理想的流程应该是这样的：

监听“下一步”按钮的点击。
点击后，检查单选元素是否被选中。
如果有被选中的元素，继续重定向。
如果不阻止重定向

我在 jsfiddle 中包含了一个演示，check it out

<form class="q2" action="">
    <div class="form-group radios">
        <label for="1">
            <input type="radio" name="physio" id="1" value="1">
            <span class="checkmark"></span>
             Mark
        </label> 
    </div> 
    <div class="form-group radios">
        <label for="2">
            <input type="radio" name="physio" id="2" value="2">
            <span class="checkmark"></span>
            John
        </label>
    </div>
    <div class="form-group radios">
        <label for="3">
            <input type="radio" name="physio" id="3" value="3">
            <span class="checkmark"></span>
            Jack 
        </label>
    </div>
</form>

<a href="poids-ideal-chat.html" id="nextClick">
    <div class="button-icon next cta src">
        <p>
            Next 
        </p>
    </div>
</a>

<script>
    document.getElementById('nextClick').addEventListener('click', function(event) {

    // Get all the radio 'physio' elements
    var radios = document.getElementsByName('physio');

    // Loop through each element
    for (var i = 0, length = radios.length; i < length; i++) {
        // Check if the current element is selected
        if (radios[i].checked) {
            var selected_value = radios[i].value; // Value of checked element
            // Exit event handler and redirect the page if a radio element is selected
            return;
        }
    }
    // If no item was selected prevent the page redirect
    event.preventDefault();
});
</script>

选择复选框和 'Next' 按钮后重定向到 link

Redirect to a link after selecting a checkbox and a 'Next' button

javascript

checkbox

redirect

href

button