Изменить значение и ссылку в зависимости от выбора переключателя

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

Мы можем использовать динамическую функцию, чтобы справиться с этим.

Вы можете просто создать динамическую функцию в JS, которая будет работать для 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>

Answer 2

Объяснение

Хорошо, поэтому вместо того, чтобы иметь большой оператор 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 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

Не уверен, почему вы пытаетесь изменить href ввода ввода, вход не принимает href в качестве атрибута и не будет ничего делать, если он также был изменен.

Просто перенаправьтепользователь, когда они нажимают кнопку внутри функции.

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