2016-09-16 11 views
-2

必要なラジオ・グループを持つhtmlフォームを作成したいと考えています。 このラジオグループの特定のオプションを1つ選択すると、チェックボックスグループが表示されます。このチェックボックスグループは、表示されている場合にのみ必要です。 どうすればこのことができますか? 好ましくは純粋なHTMLですが、絶対に必要な場合はJavaScriptも使用できます。HTML - ラジオグループに基づいてチェックボックスグループを公開するにはどうすればよいですか?

おかげ

+1

私たちは無料のコーディングサービスではありません。あなたが試したことを示し、あなたが何を抱いているか教えてください。 – j08691

+0

あなたが試したことやあなたの問題に関するいくつかのコードや例を見せてください。見てみましょう:http://stackoverflow.com/help/how-to-ask – RPichioli

答えて

2

はこのような何かが動作するはずです:

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

0

あなたはあなたの参照のためのコードを以下使用することができます(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>

関連する問題