我有具有相同名称和相同ID的单选按钮，它们是动态数据，我想在输入中显示这些单选按钮值，但是当我检查单选按钮时，即使我检查了第二个单选按钮，输入中也只显示第一个单选按钮值或第三个单选按钮。
我有三个输入类型的单选按钮，它们具有相同的名称和ID，但具有不同的值，我正在检查第二个和第三个单选按钮，但它仅在输入中显示第一个单选按钮值。
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color
<input type="text" id="demo">
<script>
function myFunction() {
var x = document.getElementById("myRadio").value;
document.getElementById("demo").value = x;
}
</script>
</body>
</html>
当我检查红色时，其值应在带有id演示的输入类型上显示，如果我检查绿色或蓝色，则应在具有id演示的输入中显示这些值。
同一ID不能有多个元素，因为ID应该是唯一的。您应该将它们替换为一个类，然后以该类的名称为目标。
另外，请避免编写内联JavaScript，而是使用事件监听器，如下所示：
/* JavaScript */
var radio = document.querySelectorAll(".myRadio");
var demo = document.getElementById("demo");
function checkBox(e){
demo.value = e.target.value;
}
radio.forEach(check => {
check.addEventListener("click", checkBox);
});<!-- HTML -->
<input type="radio" name="colors" value="red" class="myRadio">Red color
<input type="radio" name="colors" value="blue" class="myRadio">Blue color
<input type="radio" name="colors" value="green" class="myRadio">Green color
<input type="text" id="demo">