首页原生JavaScript单选框联动

原生JavaScript单选框联动

时间: 2023-09-28 18:13:55 浏览: 109

当一个单选框选中时，我们可以使用JavaScript来实现与其他单选框的联动效果。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>单选框联动示例</title> </head> <body> <h3>请选择：</h3> <input type="radio" name="fruit" value="apple" onchange="handleFruitChange(event)">苹果 <input type="radio" name="fruit" value="orange" onchange="handleFruitChange(event)">橙子 <input type="radio" name="fruit" value="banana" onchange="handleFruitChange(event)">香蕉 <h3>你选择的是：</h3> <p id="selectedFruit"></p> <script> function handleFruitChange(event) { var selectedFruit = event.target.value; document.getElementById("selectedFruit").textContent = selectedFruit; } </script> </body> </html> ``` 在上面的代码中，我们创建了三个单选框，它们的name属性都设置为"fruit"，value属性分别设置为"apple"、"orange"和"banana"。每个单选框都有一个onchange事件，在选中状态改变时会触发该事件。在JavaScript中，我们定义了一个handleFruitChange函数，它接收一个event参数。当单选框的选中状态改变时，该函数会被调用。我们通过event.target.value来获取当前选中的值，并将其显示在id为"selectedFruit"的段落元素中。这样，当你选择一个单选框时，选中的值就会在页面上显示出来，实现了单选框的联动效果。

阅读全文