Question

我正在尝试使用inner.html输出表单值我的复选框有2个问题： 1.如果我检查多于1个复选框，则只输出一个 2.如果未选中复选框，则也不输出其他字段的输入我该如何解决这个问题？

<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = document.querySelector('.color:checked').value;

document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>

<form method="get" onsubmit="return changeText()">        
<input type="text" name="name" id="name" />        
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />

Answer 1

document.querySelector只获取一个元素，遇到第一个元素，您使用document.querySelectorAll获取所有匹配元素，然后您可以将其转换为数组并使用map返回一致的字符串值，如下所示：

<script>function changeText(){
var userInputname = document.getElementById('name').value;
var userInputcolor = Array.prototype.slice.call(document.querySelectorAll(".color:checked")).map(function(el) {
        return el.value;
    }).join(', ')

document.getElementById('output1').innerHTML = userInputname;
document.getElementById('output2').innerHTML = userInputcolor;
return false;
}
</script>

<form method="get" onsubmit="return changeText()">        
<input type="text" name="name" id="name" />        
<br /><br />
<input type="checkbox" name="color" class="color" value="green">Green<br />
<input type="checkbox" name="color" class="color" value="yellow">Yellow<br />
<input type="checkbox" name="color" class="color" value="red">Red<br />
<input type="checkbox" name="color" class="color" value="blue">Blue<br />
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />

FIDDLE

如何输出复选框的值

1 个答案: