时间戳

首页 > 解决方案 > 选中复选框和“下一步”按钮后重定向到链接

javascript - 选中复选框和“下一步”按钮后重定向到链接

问题描述

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

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

谢谢你帮助人们

标签： javascriptredirectbuttoncheckboxhref

解决方案

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

  1. 听“下一步”按钮的点击。
  2. 单击时，检查单选元素是否已被选中。
  3. 如果有选中的元素，继续重定向。
  4. 如果不阻止重定向

我在 jsfiddle 中包含了一个演示，检查一下

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

推荐阅读