要实现只激活一个单选按钮,可以使用以下方法:
示例代码:
<input type="radio" name="option" value="option1" onclick="handleRadioClick(this)">
<input type="radio" name="option" value="option2" onclick="handleRadioClick(this)">
<input type="radio" name="option" value="option3" onclick="handleRadioClick(this)">
<script>
function handleRadioClick(radio) {
var radios = document.getElementsByName("option");
for (var i = 0; i < radios.length; i++) {
if (radios[i] !== radio) {
radios[i].checked = false;
}
}
}
</script>
示例代码(使用React):
import React, { useState } from "react";
function RadioButtonGroup() {
const [selectedOption, setSelectedOption] = useState(null);
const handleRadioClick = (option) => {
setSelectedOption(option);
};
return (
<div>
<input
type="radio"
name="option"
value="option1"
checked={selectedOption === "option1"}
onChange={() => handleRadioClick("option1")}
/>
<input
type="radio"
name="option"
value="option2"
checked={selectedOption === "option2"}
onChange={() => handleRadioClick("option2")}
/>
<input
type="radio"
name="option"
value="option3"
checked={selectedOption === "option3"}
onChange={() => handleRadioClick("option3")}
/>
</div>
);
}
以上是两种常见的实现只激活一个单选按钮的方法。根据具体的开发需求和使用的技术栈,你可以选择适合自己的方法来实现该功能。
领取专属 10元无门槛券
手把手带您无忧上云