是一种常见的用户界面设计需求,可以通过以下步骤来实现:
<input type="checkbox" id="checkbox" onchange="addRadioButtons()">
<div id="radioGroup"></div>
function addRadioButtons() {
var checkbox = document.getElementById("checkbox");
var radioGroup = document.getElementById("radioGroup");
// 清空容器中的内容
radioGroup.innerHTML = "";
// 如果复选框被选中,则添加一组单选按钮
if (checkbox.checked) {
var radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "radioGroup";
radio1.value = "option1";
radioGroup.appendChild(radio1);
var label1 = document.createElement("label");
label1.innerHTML = "Option 1";
radioGroup.appendChild(label1);
var radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "radioGroup";
radio2.value = "option2";
radioGroup.appendChild(radio2);
var label2 = document.createElement("label");
label2.innerHTML = "Option 2";
radioGroup.appendChild(label2);
// 添加更多单选按钮...
}
}
#radioGroup {
margin-top: 10px;
}
input[type="radio"] {
margin-right: 5px;
}
以上代码演示了如何在选中复选框时在窗体上添加一组简单的单选按钮。根据实际需求,你可以根据不同的情况来自定义单选按钮的数量、标签和值。这种设计模式常用于需要用户从多个选项中选择一个的场景,如问卷调查、表单填写等。
腾讯云提供了丰富的云计算产品和服务,其中与前端开发相关的产品包括云服务器、云存储、云函数等。你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)来了解更多关于这些产品的详细信息和使用指南。
领取专属 10元无门槛券
手把手带您无忧上云