Show child divs when checkboxes are checked
HTML
<div>
<label for="set">Select question set:</label>
<select type="select" name="set" id="set" required>
<option value="">Select</option>
<option value="set1" selected>One</option>
<option value="set2">Two</option>
</select>
</div>
<div id="set1" class="checkboxes">
<input type="checkbox" name="set1-questions1" id="set1-questions1" checked>
<label for="set1-questions1">Set 1 Questions 1</label>
<br>
<input type="checkbox" name="set1-questions2" id="set1-questions2">
<label for="set1-questions2">Set 1 Questions 2</label>
<div id="set1-questions1-qs" class="sub-questions">
<h2>Set 1 Questions 1</h2>
<label for="set1-questions1-q1">Set 1 Questions 1 Q1</label>
<textarea name="set1-questions1-q1" id="set1-questions1-q1"></textarea>
<label for="set1-questions1-q2">Set 1 Questions 1 Q2</label>
<textarea name="set1-questions1-q2" id="set1-questions1-q2"></textarea>
</div>
<div id="set1-questions2-qs" class="sub-questions">
<h2>Set 1 Questions 2</h2>
<label for="set1-questions1-q2">Set 1 Questions 2 Q1</label>
<textarea name="set1-questions2-q1" id="set1-questions2-q1"></textarea>
<label for="set1-questions2-q2">Set 1 Questions 2 Q2</label>
<textarea name="set1-questions2-q2" id="set1-questions2-q2"></textarea>
</div>
</div>
<div id="set2" class="checkboxes">
<input type="checkbox" name="set2-questions1" id="set2-questions1">
<label for="set2-questions1">Set 2 Questions 1</label>
<br>
<input type="checkbox" name="set2-questions2" id="set2-questions2">
<label for="set2-questions2">Set 2 Questions 2</label>
<div id="set2-questions1-qs" class="sub-questions">
<h2>Set 2 Questions 1</h2>
<label for="set2-questions1-q1">Set 2 Questions 1 Q1</label>
<textarea name="set2-questions1-q1"...
CSS
* {
box-sizing:border-box;
}
body {
font-family:sans-serif;
margin:1em auto;
max-width:460px;
}
label {
margin-bottom:1em;
}
textarea {
margin-bottom:1em;
min-width:100%;
}
ul {
padding:0;
list-style:none;
}
div {
border-bottom:1px solid lightgrey;
margin-bottom:1em;
padding-bottom:1em;
}
.checkboxes,
.sub-questions {
display:none;
}
JavaScript
// Show/Hide checkbox divs using select
$('#set').change(function(){
$('.checkboxes').hide();
$('#' + $(this).val()).show();
});
$('div.checkboxes input[type="checkbox"]').on('change', function() {
$('#' + this.id + '-qs').toggle( this.checked );
});
// Sorted by triggering .change() on page load
/* E.g.
$('#set').change(function(){
$('.checkboxes').hide();
$('#' + $(this).val()).show();
}).change(); <- This bit!
*/