必要なラジオ・グループを持つhtmlフォームを作成したいと考えています。 このラジオグループの特定のオプションを1つ選択すると、チェックボックスグループが表示されます。このチェックボックスグループは、表示されている場合にのみ必要です。 どうすればこのことができますか? 好ましくは純粋なHTMLですが、絶対に必要な場合はJavaScriptも使用できます。HTML - ラジオグループに基づいてチェックボックスグループを公開するにはどうすればよいですか?
おかげ
必要なラジオ・グループを持つhtmlフォームを作成したいと考えています。 このラジオグループの特定のオプションを1つ選択すると、チェックボックスグループが表示されます。このチェックボックスグループは、表示されている場合にのみ必要です。 どうすればこのことができますか? 好ましくは純粋なHTMLですが、絶対に必要な場合はJavaScriptも使用できます。HTML - ラジオグループに基づいてチェックボックスグループを公開するにはどうすればよいですか?
おかげ
はこのような何かが動作するはずです:
.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() {
\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>
私たちは無料のコーディングサービスではありません。あなたが試したことを示し、あなたが何を抱いているか教えてください。 – j08691
あなたが試したことやあなたの問題に関するいくつかのコードや例を見せてください。見てみましょう:http://stackoverflow.com/help/how-to-ask – RPichioli