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

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 标签的目的几乎是作为页面上的链接，我想使用您的原始方法可能会导致一些错误，尤其是在特定浏览器中，至少带有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>

Answer 2

不知道为什么要更改提交输入的href，输入不将href作为属性，如果它也被更改，它也不会做任何事情。

当用户点击函数内的按钮时，只需重定向用户。

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

Answer 3

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

Google 拒绝了他们的连接，但您可以从 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"  />

Answer 4

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

您可以简单地在 JS 中创建一个动态函数，通过获取它们的 value 属性和 id 并相应地更改输入按钮，该函数适用于 n 个径向按钮。

代码sn-p：

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