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

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>

- user7548188

---

你应该为你的链接单独创建一个 a 元素。 - Jack Bashford

提交应该与表单一起使用，您提交的是一个表单，而不仅仅是提交一个输入。但是您也可以在函数内部简单地重定向用户，同时更改提交输入的href属性是没有意义的。 - Art3mix

Answer 1

解释

相比使用大型的if语句或switch语句，你可以设置一个HTML属性来包含相关的URL。在我的回答中，你可以看到我使用了data-url。个人认为这样做更加简洁，同时也意味着JavaScript运行时需要处理的逻辑更少。

考虑到change函数引用了被点击的单选按钮，你可以从那里访问data-url属性，并更新a标签。

另外，相比于按钮/输入标签，使用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>

编辑

这个解决方案仅使用本地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>

- JO3-W3B-D3V

---

如果这是一个复杂或大型的应用程序，我完全同意，但考虑到这个特定示例的大小，我相信它会没问题的，无论如何我都会为了好玩更新答案！ :) 无论如何，感谢您的输入@SølveTornøe - JO3-W3B-D3V

哈哈，你说得对。然而，始终保持性能意识将在未来为你节省大量时间。此外，代码看起来也会更加清晰:D - Sølve T.

你如何确定应用程序的复杂性？如果这只是他们遇到的问题的模拟，那该怎么办？@JO3-W3B-D3V，哈哈大笑很好，但使用最佳实践总是更好的选择。 - Art3mix

@JO3-W3B-D3V 不是的，因为标记了jQuery，但你可以添加额外的方法而不使用jQuery，这样未来不想要jQuery解决方案的用户也可以找到其他有用的方法。（顺便说一下，即使我的网站已经包含了它，我也永远不会使用jQuery解决方案来解决这个问题。） - Art3mix

@Art3mix，我使用jQuery的唯一原因是因为OP标记了jQuery，个人而言，我已经完全不再使用jQuery了，我可能也会写一个非jQuery的解决方案。 - JO3-W3B-D3V

Answer 2

不确定为什么您尝试更改提交输入的href，该输入不将href作为属性，并且如果它也被更改，它不会执行任何操作。

只需在函数内部单击按钮时重定向用户即可。

function myFunction() {
    if(document.getElementById('radiogroup1').checked) {
        window.location.replace("http://google.com");
    } else {
      window.location.replace("http://bing.com");
    }
}

- Art3mix

Answer 3

如果您希望用户单击按钮打开页面，可以使用自定义属性将URL传递。

谷歌拒绝了他们的连接，但是您可以从Bing选项中看到代码有效。

// Add click event to radiogroup
$('.radiogroup').change(function(e) {

  // Update url attribute and value of button from radio button
  $('#amount').attr("url", $(this).attr("url")).val($(this).val());
 
});

// Add click event to submit button
$(document).on("click", "#amount", function() {

  // Print URL to console (Can be deleted)
  console.log( $(this).attr("url") );
  
  // Open page in window
  window.location.assign($(this).attr("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" url="http://google.com"/> Google
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" url="http://bing.com" /> Bing (working)


<input type="submit" name="amount" id="amount"  />

- Oliver Trampleasure

Answer 4

我们可以使用动态函数来实现这个。

您可以在JS中创建一个动态函数，通过获取它们的值属性和ID来为n个单选按钮工作，并相应地更改输入按钮。

代码片段：

<input id="google" type="radio" name="radiogroup" class="radiogroup" value="Google" onclick="changeLink(event)" />
<input id="bing" type="radio" name="radiogroup" class="radiogroup" value="Bing" onclick="changeLink(event)" />
<input type="submit" name="amount" id="btn" />
    <script>
      const changeLink = e => {
          let _target = e.currentTarget.id, //get the id name.
              targetValue = document.getElementById(_target).getAttribute('value'), //use id name to fetch value attribute.
              btn = document.getElementById('btn'); //get the btn element from DOM.

        btn.setAttribute('value', targetValue); //set btn elements 'src' attribute to the value of the radial button clicked.
        btn.setAttribute('src', 'https://' + targetValue.toLowerCase() + '.com'); //same src but convert to lower case first.
        
        console.log(btn); //for testing the link
      }
    </script>

- Harry Punia