基于单选按钮的嵌套复选框。Html

1. 在HTML中添加一个单选按钮和嵌套的复选框。

<label>
  <input type="radio" name="option" value="option1"> Option 1  
</label>
<br>
<label>
  <input type="checkbox" name="option1_checkbox" value="option1_checkbox1"> Option 1 Checkbox 1
</label>
<label>
  <input type="checkbox" name="option1_checkbox" value="option1_checkbox2"> Option 1 Checkbox 2
</label>
<br>
<label>
  <input type="radio" name="option" value="option2">Option 2
</label>
<br>
<label>
  <input type="checkbox" name="option2_checkbox" value="option2_checkbox1">Option 2 Checkbox 1
</label>

<label>
  <input type="checkbox" name="option2_checkbox" value="option2_checkbox2">Option 2 Checkbox 2
</label>

2. 添加JavaScript来控制复选框的显示隐藏。

var option1_checkbox = document.getElementsByName("option1_checkbox");
var option2_checkbox = document.getElementsByName("option2_checkbox");

document.getElementsByName("option")[0].addEventListener("click", function() {
  if (this.checked) {
    option1_checkbox[0].style.display = "block";
    option1_checkbox[1].style.display = "block";
    option2_checkbox[0].style.display = "none";
    option2_checkbox[1].style.display = "none";
  }
});

document.getElementsByName("option")[1].addEventListener("click", function() {
  if (this.checked) {
    option1_checkbox[0].style.display = "none";
    option1_checkbox[1].style.display = "none";
    option2_checkbox[0].style.display = "block";
    option2_checkbox[1].style.display = "block";
  }
});

以上代码将第一个单选按钮与第一组复选框相关联，并将第二个单选按钮与第二组复选框相关联。当单选按钮1被选中时，第一组复选框将被显示，第二组复