使用其 ID 复制单选值以使用 JavaScript 作为值插入输入答案

【问题标题】：Copy radio value using its ID to insert into input as value using JavaScript使用其 ID 复制单选值以使用 JavaScript 作为值插入输入
【发布时间】：2016-08-22 08:29:06
【问题描述】：

我有一些 HTML 代码如下：

<input name="bid" type="radio" value="1" id="1234"/>
<input name="bid" type="radio" value="2" id="5678"/>
<input type="text" id="paymount" name="paymount" value=""/>

所需功能：

选中radio=1 时，paymount 字段值将显示为1234。勾选radio=2时，paymount字段值将显示为5678。

我在 Stack Overflow 上找到了帖子，但其中很多都与隐藏文本字段有关。

【问题讨论】：

您应该考虑使用与id 不同的属性来存储值，因为禁止以数字开头的id 值：developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id 网络作者不得使用它来传达任何信息信息
还有其他建议吗？谢谢。
您可以使用语义 id，例如 paymount-low 和 paymount-high 并使用 value 作为数字，或者您定义像 data-paymount 这样的属性并将数字存储在那里。
@Joshua 轻微挑剔：in HTML5 all-numeric IDs are valid.

标签： javascript html input

【解决方案1】：

使用更改事件处理程序来监听事件。

// use `[].slice.call(document.querySelectorAll('[name="bid"]'))
// for older browser to covert NodeList to Array

// although check polyfill option of `ArrayforEach` for older browser
// or use simple `for` or `while` loop for iterating

// get all radio with the name,covert NodeList to array and iterate
Array.from(document.querySelectorAll('[name="bid"]')).forEach(function(ele) {
  // add event handler to the element
  ele.addEventListener('change', function() {
    // update value of the input element
    document.getElementById('paymount').value = this.id;
    // if you are used `data-id="value" attribute instead of `id`
    // then get the value using `this.dataset.id`
  });
});

<input name="bid" type="radio" value="1" id="1234" />
<input name="bid" type="radio" value="2" id="5678" />
<input type="text" id="paymount" name="paymount" value="" />

仅供参考： 使用自定义data-* attribute 存储id 属性的相应值目的是唯一标识一个元素。可以从元素的dataset 属性中检索自定义的data-* attribute 值。

【讨论】：

【解决方案2】：

<form name="radioForm">
    <input name="bid" type="radio" value="1" id="1234"/>
    <input name="bid" type="radio" value="2" id="5678"/>
    <input type="text" id="paymount" name="paymount" value=""/>
</form>     

<script type="text/javascript">
    var radio = document.radioForm.bid,
        input = document.getElementById('paymount');

    for(var i = 0; i < radio.length; i++) {
        radio[i].onclick = function() {            
            input.value = this.id;
        };
    }
</script>

jsFiddle

【讨论】：

嗨，谢谢你的遮阳篷，但 payment value 应该是 radio id，而不是 radio value。

【解决方案3】：

我不确定这是否是最佳解决方案，但以下方法可以满足您的需要。

var inputs = document.querySelectorAll('input[name="bid"]'),
    paymount = document.getElementById('paymount');

// loop over element, and add event listener
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("change", onChange);
}
// callback 
function onChange(){
  paymount.value = this.id; // change paymount value to the selected radio id
}

<input name="bid" type="radio" value="1" id="1234"/>
<input name="bid" type="radio" value="2" id="5678"/>
<input type="text" id="paymount" name="paymount" value=""/>

【讨论】：

【解决方案4】：

<script>
    function getradio(i)
    {
        document.getElementById("paymount").value=i;
    }
</script>

<input name="bid" type="radio" value="1" id="1234" onclick="getradio(1234)"/>
<input name="bid" type="radio" value="2" id="5678" onclick="getradio(5678)"/>

<input type="text" id="paymount" name="paymount"/>

您可以使用 JavaScript 并通过使用单选按钮上的 onclick 事件调用函数并传递所需的值。

【讨论】：