javascript - 根据单选按钮选择更改值和链接

Question

我正在尝试根据选择的单选按钮获取要更改的文本值和链接。例如，选择第一个单选按钮会将文本更改为“Google”，并且会链接到 google.com。选择第二个单选按钮会将文本更改为“bing”并链接到 bing.com。我已设法更改文本，但链接无法正常工作。任何帮助将不胜感激。

jsfiddle - https://jsfiddle.net/3yrcusv8/

$('.radiogroup').change(function(e){
    var selectedValue = $(this).val();
    $('#amount').val(selectedValue)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" />
    <input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" />

   
  <input type="submit" name="amount" id="amount" onclick='myFunction()' />
  <script>
    function myFunction() {
   
        if(document.getElementById('radiogroup1').checked) {
            document.getElementById('amount').href = "https://google.com";
        }
    }
    
</script>

Answer 1

解释

好吧，与其使用大型 if 语句或大型 switch 语句，不如设置一个 HTML 属性来包含相关的 URL，在我的回答中，您可以看到我使用了 data-url 。就我个人而言，我发现这对于 JavaScript 方面的事情来说更清晰，这也意味着在 JavaScript 运行时内处理的逻辑也更少。

考虑到 change 功能，您引用已单击的单选按钮，您可以从那里访问 data-url 属性，并更新 一个标签。

另一个注意事项，在按钮/输入标签上使用 a 标签更有意义，因为 a 标签的目的几乎是成为页面上的链接，我想象一下使用您原来的方法可能会导致一些错误，尤其是在特定的浏览器中，至少使用 a 标记，您知道它会起作用。

$('.radiogroup').change(function(e) {
  const $this = $(this), $link = $("#url");
  $link.html($this.val());
  $link.attr("href", $this.attr("data-url"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>

编辑

此解决方案仅使用 native JavaScript，仅此而已。

const a = document.getElementById("url");
const inputs = document.querySelectorAll('.radiogroup');

// A simple function to handle the click event for each input.
const clickHandler = i => {
  a.href = i.getAttribute("data-url");
  a.textContent = i.getAttribute("value");
};

// Possibly even less code again. 
inputs.forEach(i => i.onclick = () => clickHandler(i));

<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>