Question

我无法显示单选按钮的值当我点击单选按钮时，我想在框中看到按钮的所有值。它在控制台上显示值，但在框中，它只显示＆＃39;胡萝卜＆＃39;这是阵列中的一个成分。

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
启动功能时清空mixbox。
使用复选框代替收音机，以便用户可以放弃选择。

    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

遍历每个无线电元素并分配单击事件处理程序。

单选按钮单击处理程序首先清除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清空空白方框的单选按钮的值

2 个答案: