Javascript: 使用 innerHTML 清空空白方框的单选按钮值

Question

我无法显示单选按钮的值当我点击单选按钮时，我想查看框中按钮的所有值。它在控制台上显示值，但在框中，它仅显示 'carrot'，这是数组中的成分之一。

function mixRecipeBox(){
var mixIngredients = document.getElementsByTagName('input');
  for(i=0; i<mixIngredients.length; i++){
    if(mixIngredients[i].checked)
    console.log(mixIngredients[i].value);
    document.getElementById('mixbox').innerHTML = mixIngredients[i].value;
  }
}

Answer 1

您将在每个循环中替换 mixbox 的所有数据。用这个来附加数据。
您忘记了 if block
函数启动时清空混合框。
使用复选框而不是单选框，这样用户就可以放弃选择。

    function mixRecipeBox(){
    document.getElementById('mixbox').innerHTML=""
    var currentHTML;
    var mixIngredients = document.getElementsByTagName('input');
    
      for(i=0; i<mixIngredients.length; i++){
        if(mixIngredients[i].checked)
        {
         console.log(mixIngredients[i].value);
         currentHTML= document.getElementById('mixbox').innerHTML;
         document.getElementById('mixbox').innerHTML = currentHTML+mixIngredients[i].value;
        }
      }
    }

<input type="checkbox" value="1" onchange="mixRecipeBox()">
<input type="checkbox" value="2" onchange="mixRecipeBox()">
<input type="checkbox" value="3" onchange="mixRecipeBox()">
<input type="checkbox" value="4" onchange="mixRecipeBox()">
<div id="mixbox"></div>

Answer 2

遍历每个单选元素并分配一个 click 事件处理程序。

单选按钮 click 处理程序首先清除 mixbox，然后遍历每个单选元素并将选中的单选按钮值放入 mixbox。

<div id="rads">
    <input type="radio" value="one"   />1
    <input type="radio" value="two"   />2
    <input type="radio" value="three" />3
</div>
<div id="mixbox"></div>

<script>

var rads = document.querySelectorAll('#rads input[type=radio]');
var mixbox = document.getElementById('mixbox');
Array.prototype.forEach.call(rads, function (elem) {
    elem.addEventListener('click', function (evt) {
        mixbox.innerHTML = '';
        Array.prototype.forEach.call(rads, function (ele) {
            if ( ele.checked ) { mixbox.innerHTML += ele.value + '<br>'; }
        })
    })
})

</script>

JSFiddle

Javascript: 使用 innerHTML 清空空白方框的单选按钮值

Javascript: value of radio button to empty blank square box using innerHTML

html

javascript

innerhtml

radio-button