Question

我有相同名称和相同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演示的输入中显示这些值。

Answer 1

自 IDs should be unique 起，您不能有多个具有相同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">

Answer 2

您可以将事件传递给myFunction函数，并使用该事件来确定单击了哪个单选按钮，下面是一个示例：

function myFunction(event) {
  document.getElementById("demo").value = event.target.value;
}

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color


<input type="text" id="demo">

</body>
</html>

Answer 3

<!DOCTYPE html>
    <html>
    <body>

    <input type="radio" name="colors" onclick="myFunction(this.value)" value="red" id="myRadio">Red color
    <input type="radio" name="colors" onclick="myFunction(this.value)" value="blue" id="myRadio">Blue color
    <input type="radio" name="colors" onclick="myFunction(this.value)" value="green" id="myRadio">Green color


    <input type="text" id="demo">

    <script>
    function myFunction(x) {
      document.getElementById("demo").value = x;
    }
    </script>

    </body>
    </html>

Answer 4

属性id在文档中必须是唯一的。您可以改用class，因为class可以用于标识多个元素。

请注意：使用内联事件处理程序不是一种好习惯。

您可以使用Document.querySelectorAll()来返回静态的（非实时的） NodeList ，该列表表示与指定选择器组匹配的文档元素列表。然后，您可以实现forEach()来遍历所有元素以附加事件。

您只需使用this关键字即可引用函数中当前的 radio 按钮。

const allRadios = document.querySelectorAll('.myRadio');
const demo = document.getElementById('demo');
allRadios.forEach(r => r.addEventListener('change', myFunction));
function myFunction() {
  demo.value = this.value;
}

<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">

如果您不想修改HTML，则可以通过使用元素的 name 和 checked 属性，将属性选择器与Document.querySelector()结合使用。 / p>

document.querySelector('[name=colors]:checked').value

const demo = document.getElementById('demo');
function myFunction() {
  var x = document.querySelector('[name=colors]:checked').value;
  demo.value = x;
}

<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">

Answer 5

首先，您不应有3个具有相同ID的元素。其次，您可以使用jQuery选中选中的单选按钮。这是您更新的代码：

function myFunction() {
 
  document.getElementById("demo").value =  $('input[name=colors]:checked').val();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction()" value="red" >Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" >Green color


<input type="text" id="demo">

</body>
</html>

如果您想在没有jquery的情况下进行操作：

function myFunction(event) {
var checked = null; 
var elements = document.getElementsByTagName('input');
for(var i=0; elements[i]; ++i){
      if(elements[i].checked){
           checked = elements[i].value;
           break;
      }
}
  document.getElementById("demo").value = checked;
}

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color


<input type="text" id="demo">

</body>
</html>

Answer 6

不要重复使用ID 。ID表示唯一。在使用元素组时，应使用class或任何其他公共属性。我正在使用单选按钮组的名称。

function myFunction() {
	var colorSelected = document.querySelector('input[name="colors"]:checked').value;
	document.getElementById("demo").value = colorSelected;
}

<label><input type="radio" name="colors" onclick="myFunction()" value="red">Red color</label>
<label><input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color</label>
<label><input type="radio" name="colors" onclick="myFunction()" value="green" >Green color</label>


<p>Selected Color <input type="text" id="demo"></p>

如何在输入中显示单选按钮值

6 个答案: