HTML - 如何顯示基於廣播組的複選框組？

Question

我想要一個具有所需廣播組的html表單。 如果選擇了此無線電組中的一個特定選項，它將顯示一個複選框組。此複選框組只應在需要時才需要顯示。 我怎麼能這樣做？ 最好在純HTML中，但如果絕對必要的話，也可以使用javascript。

感謝

Answer 1

像這樣的東西應該工作：

.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>

Answer 2

您可以使用您參考下面的代碼（HTML和Javascript）：

window.onload = function() { 
 
\t \t var rad = document.myForm.radioBtnNm; 
 
\t \t var prev = null; 
 
\t \t for (var i = 0; i < rad.length; i++) { 
 
\t \t \t rad[i].onclick = function() { 
 
\t \t \t \t 
 
\t \t \t \t if (this.checked == true) { 
 
\t \t \t \t \t if (this.value == "check1") { 
 
\t \t \t \t \t \t document.getElementById("checkboxDiv1").style.display = "none"; 
 
\t \t \t \t \t \t document.getElementById("checkboxDiv2").style.display = "block"; 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t document.getElementById("checkboxDiv1").style.display = "block"; 
 
\t \t \t \t \t \t document.getElementById("checkboxDiv2").style.display = "none"; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }; 
 
\t \t } 
 

 
\t }

<form name="myForm" id="myForm"> 
 
\t \t <div id="radioDiv"> 
 
\t \t \t <input type="radio" name="radioBtnNm" value="check1">Show 
 
\t \t \t Chckbox list 1<br> <input type="radio" name="radioBtnNm" 
 
\t \t \t \t value="check2">Show Chckbox list 2<br> 
 
\t \t </div> 
 

 
\t \t <div id="checkboxDiv1" style="display: none"> 
 
\t \t \t <br> <label>Checkbox List 1</label> <br> <input 
 
\t \t \t \t type="checkbox" name="checkbox1" value="one"> One<br> <input 
 
\t \t \t \t type="checkbox" name="checkbox1" value="two"> Two<br> <input 
 
\t \t \t \t type="checkbox" name="checkbox1" value="three"> Three<br> 
 
\t \t </div> 
 

 
\t \t <div id="checkboxDiv2" style="display: none"> 
 
\t \t \t <br> <label>Checkbox List 2</label> <br> <input 
 
\t \t \t \t type="checkbox" name="checkbox2" value="three"> Three<br> 
 
\t \t \t <input type="checkbox" name="checkbox2" value="two"> Two<br> 
 
\t \t \t <input type="checkbox" name="checkbox2" value="one"> One<br> 
 
\t \t </div> 
 
\t </form>