Code:
<script type="text/javascript" charset="utf-8">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);
// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });
// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}
// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {
// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 4 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 4, 2);
// Sub-question 7 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 7, 2);
});
</script>
