如何显示一个基于单选组的复选框组

HTML - How do I reveal a checkbox group based on radio group?

本文关键字：于单选 复选框 一个 何显示 显示      更新时间：2023-09-26

我想有一个html表单与所需的无线电组。如果选择了这个单选组中的一个特定选项，它将显示一个复选框组。这个复选框组只有在显示时才需要。我怎么能这么做?最好是纯HTML，但如果绝对必要，也可以使用javascript。

谢谢

应该这样做:

.checkbox-group {
  display: none;
}
[type=radio]:checked + .checkbox-group {
  display: block;
}
/*unneccessary*/
input { float: left;}
input[type=radio] { clear: both;}
<input type="radio" name="radio[]" value="val1">
<div class="checkbox-group">
  <input type="checkbox" name="val1_checkbox[]" value="1"/>
  <input type="checkbox" name="val1_checkbox[]" value="2"/>
  <input type="checkbox" name="val1_checkbox[]" value="3"/>
</div>
<input type="radio" name="radio[]" value="val2">
<div class="checkbox-group">
  <input type="checkbox" name="val2_checkbox[]" value="1"/>
  <input type="checkbox" name="val2_checkbox[]" value="2"/>
  <input type="checkbox" name="val2_checkbox[]" value="3"/>
</div>
<input type="radio" name="radio[]" value="val3">
<div class="checkbox-group">
  <input type="checkbox" name="val3_checkbox[]" value="1"/>
  <input type="checkbox" name="val3_checkbox[]" value="2"/>
  <input type="checkbox" name="val3_checkbox[]" value="3"/>
</div>

您可以使用以下代码作为参考(HTML和Javascript):

window.onload = function() {
		var rad = document.myForm.radioBtnNm;
		var prev = null;
		for (var i = 0; i < rad.length; i++) {
			rad[i].onclick = function() {
				
				if (this.checked == true) {
					if (this.value == "check1") {
						document.getElementById("checkboxDiv1").style.display = "none";
						document.getElementById("checkboxDiv2").style.display = "block";
					} else {
						document.getElementById("checkboxDiv1").style.display = "block";
						document.getElementById("checkboxDiv2").style.display = "none";
					}
				}
			};
		}
	}
<form name="myForm" id="myForm">
		<div id="radioDiv">
			<input type="radio" name="radioBtnNm" value="check1">Show
			Chckbox list 1<br> <input type="radio" name="radioBtnNm"
				value="check2">Show Chckbox list 2<br>
		</div>
		<div id="checkboxDiv1" style="display: none">
			<br> <label>Checkbox List 1</label> <br> <input
				type="checkbox" name="checkbox1" value="one"> One<br> <input
				type="checkbox" name="checkbox1" value="two"> Two<br> <input
				type="checkbox" name="checkbox1" value="three"> Three<br>
		</div>
		<div id="checkboxDiv2" style="display: none">
			<br> <label>Checkbox List 2</label> <br> <input
				type="checkbox" name="checkbox2" value="three"> Three<br>
			<input type="checkbox" name="checkbox2" value="two"> Two<br>
			<input type="checkbox" name="checkbox2" value="one"> One<br>
		</div>
	</form>

相关文章：