时间戳

首页 > 解决方案 > 使用 Javascript 使 Anchor 标记有条件地工作

javascript - 使用 Javascript 使 Anchor 标记有条件地工作

问题描述

我有一个单选按钮。我想对“提交”锚标记实施验证，如果未在单选按钮上进行选择，则显示错误，如果选择单选按钮，则重定向到href属性中提供的 URL。

以下是单选按钮的代码 -

<div>
    <input required="" type="radio" id="group02-0" name="group02" value="Yes" onclick="yesnoCheck();">
    <label for="group02-0" >Yes</label>
    <input type="radio" id="group02-1" name="group02" value="No" onclick="yesnoCheck();">
    <label for="group02-1">No</label>
</div>

<script>
    var radio_value = "";
    function yesnoCheck() {
        radio_value = document.querySelector('input[name="group02"]:checked').value;
    }
</script>

在同一个HTML文件中，我有提交锚标记的代码 -

<a href="https://www.google.com" onclick="return submitCheck();"><span>Submit</span></a>

<script>
    function submitCheck() {
        if (radio_value === "") {
            //Display an error. The user should not be taken to the next page
            return false;
        } else {
            //User should be taken to the URL in the href attribute
            return true;
        }
    }
    </script>

无论我是否在单选按钮上进行选择，锚标记总是将我带到下一页。请帮忙！

标签： javascripthtml

解决方案

  • 您不需要两个单选按钮。只有一个复选框。
  • 用于Event.preventDefault()阻止默认浏览器导航
  • 使用输入元素的checked状态来确定结果
  • 最后使用document.location导航到一个 EL_submitBtn.getAttribute('href')
  • PS：不要使用内联 JavaScript（在 HTML 中）。JS 应该在一个地方，那就是您的 JS 文件或<script>标签内。它更容易调试和维护。

单个复选框

const EL_submitBtn = document.querySelector('#submitBtn');
const EL_acceptCkb = document.querySelector('[name="accept"]'); 

function submitCheck(ev) {
  ev.preventDefault(); // prevent follow link
  
  if (!EL_acceptCkb.checked) {              // Unchecked
    alert("You will not get a better UX");
  } else {                                  // Checked
    alert("Yes! Buckle up!")
    document.location = EL_submitBtn.getAttribute('href');  
  }
}

EL_submitBtn.addEventListener('click', submitCheck);
<div>
  <h3>Would you like a better UX?</h3>
  <label>
    <input type="checkbox" name="accept"> Yes I do
  </label>
</div>

<a id="submitBtn" href="https://www.google.com">Submit</a>

两个单选按钮

  • 用于document.querySelector('[name="accept"]:checked')获取选中的，如果有的话。

const EL_submitBtn = document.querySelector('#submitBtn');

function submitCheck(ev) {
  ev.preventDefault(); // prevent follow link
  
  const EL_acceptCkd = document.querySelector('[name="accept"]:checked'); 
  
  if (!EL_acceptCkd) {                      // None checked
    alert("You must select Yes or No.");
  } else if (EL_acceptCkd.value === 'no') { // "NO" checked
    alert("You will not get a better UX");
  } else {                                  // "YES" checked
    alert("Yes! Buckle up!")
    document.location = EL_submitBtn.getAttribute('href');
  }
}

EL_submitBtn.addEventListener('click', submitCheck);
<div>
  <h3>Would you like a better UX?</h3>
  <label>
    <input type="radio" name="accept" value="yes"> Yes
  </label>
  <label>
    <input type="radio" name="accept" value="no"> No
  </label>
</div>

<a id="submitBtn" href="https://www.google.com">Submit</a>

推荐阅读