Question

我有2个单选按钮。他们都有不同的价值观。我还有一个文本字段，如果我需要不同的值，我可以在该文本字段中输入该值。

    <form action="" onsubmit="return doSubmit(this)">
    <input type="radio" name="url" value="https://example.com/fee/25"> $25
    <input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
  </form>

这是我发现的使用单选按钮的Javascript

    <script type="text/javascript">
function doSubmit(form) {
    var urls = form['url'];
    var i = urls && urls.length;
    while (i--) {
      if (urls[i].checked) {
        window.location = urls[i].value;
      }
    }
document.getElementById("amount").value;
    return false;
  }

  </script>

我有一个文字字段：

<input type="text" name="amount" size="10" id="amount" value="">

确定。如果输入了金额，那么我需要使用此代码：

document.getElementById("amount").value

但如何使用单选按钮？我创建了这个JS代码：

<script type="text/javascript">
    var link = "https://example.com/fee/";
    var input= document.getElementById('amount');
    input.onchange=input.onkeyup= function() {
        link.search= encodeURIComponent(input.value);
      };
</script>

我做错了什么？在此先感谢您的时间。我喜欢并喜欢向专家学习。

Answer 1

不要使用url作为单选按钮的值，而是考虑使用您希望传递给url的值：

function doSubmit(form) {
    var endpoint = "https://example.com/fee/";
    
    // gets the values of input elements that were selected
    var checkedValues = Array.from(form.amounts)
      .filter(radio => radio.checked)
      .map(radio => radio.value);
    
    // if a radio button was checked, use its value
    // otherwise, use the value in the text field
    var amount = checkedValues.length ? 
        checkedValues[0] : form.amount.value;
    
    console.log('redirecting to: ', endpoint + amount);
    return false;
}

// uncheck radio buttons when text is entered
function uncheck() {
  Array.from(document.querySelectorAll('input[name="amounts"]'))
    .forEach(radio => radio.checked = false);
}

<form action="" onsubmit="return doSubmit(this)">
  <input type="radio" name="amounts" value="25"> $25
  <input type="radio" name="amounts" value="50"> $50
  <input type="text" name="amount" onkeyup="uncheck()">
  <input type="submit" value="Submit">
</form>

编辑：哇我完全忘了你可以使用：checked属性作为css选择器。在这种情况下，代码变得非常简单：

function doSubmit(form) {
    // select checked inputs with the specified name attribute
    var checkedRadio = document.querySelector('input[name="amounts"]:checked')
    
    // if we have a radio button that is checked, use its value
    // otherwise, use the text input's value
    var amount = checkedRadio ? checkedRadio.value : form.amount.value;
    
    window.location = 'https://example.com/fee/' + amount;
    return false;
}

// uncheck radio buttons when text is entered
function uncheck() {
  Array.from(document.querySelectorAll('input[name="amounts"]'))
    .forEach(radio => radio.checked = false);
}

<form action="" onsubmit="return doSubmit(this)">
  <input type="radio" name="amounts" value="25"> $25
  <input type="radio" name="amounts" value="50"> $50
  <input type="text" name="amount" onkeyup="uncheck()">
  <input type="submit" value="Submit">
</form>

Answer 2

我会为文本输入创建一个单独的单选按钮：

var options = Array.from(document.querySelectorAll("[name=url]"));

amount.addEventListener('focus', function() {
    options[0].checked = true; // If textbox gets focus, check that radio button
});

options[0].addEventListener('change', function() {
    amount.focus(); // if first radio button gets checked, focus on textbox.
});

function doSubmit(form) {
    // get checked value, replace empty value with input text
    var value = options.find( option => option.checked ).value || amount.value; 
    window.location = "https://example.com/fee/" + value;
    return false;
};

<form action="" onsubmit="return doSubmit(this)">
    <input type="radio" name="url" value="" checked>
         $<input type="text" name="amount" size="5" id="amount" value="" >
    <input type="radio" name="url" value="25"> $25
    <input type="radio" name="url" value="50"> $50
    <input type="submit" value="Submit">
</form>

在单选按钮和文本字段之间进行选择

2 个答案: