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

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

说明

好的，因此您可以设置HTML属性以包含相关的URL，而不是使用大型的if语句或大型的switch语句，在我的回答中，您可以看到我使用了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个径向按钮起作用。

代码段：

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