I'm trying to build a basic one question quiz. Based on the checkboxes checked 1 of 3 result divs should show.
- If consolidation hasn’t been checked then it should show the low results div
- If everything has been checked then show the high results div
- If consolidation has been ticked but other items are unticked then show medium results div
I also need to populate the medium results div with the names of the boxes that weren't checked on submit but I don't know how to go about it. Right now I've got it mostly working on submit but I can only get medium and low results to show, not the high results div. I think it's an issue with the priorities of the statements.
https://jsfiddle.net/lucym/azLf2s0t/3/
Javascript
var a = document.querySelector('#consolidation');
var btn = document.querySelector('#btn')
btn.onclick = () => {
if (a.checked == false) {
$('#low').show();
} else if ($('#list :checkbox:not(checked)').length == 0) {
$('#high').show();
} else if (a.checked == true) {
$('#medium').show();
} else {
alert('select an option');
}
};
HTML
<div id="list" style="max-width: 650px; margin: 40px auto;">
<!-- Consolidatation-->
<fieldset>
<input id="consolidation" type="checkbox" name="">
<label>Searched and combined lost funds</label>
</fieldset>
<!-- Advice -->
<fieldset>
<input id="advice" type="checkbox" name="">
<label>Talked with an advisor</label>
</fieldset>
<!-- identity -->
<fieldset>
<input id="identity" type="checkbox" name="">
<label>Completed an ID check</label>
</fieldset>
<!-- balance -->
<fieldset>
<input id="balance" type="checkbox" name="">
<label>Checked your balance</label>
</fieldset>
<!-- app -->
<fieldset>
<input id="app" type="checkbox" name="">
<label>Downloaded the Sunsuper app</label>
</fieldset>
<!-- calculator -->
<fieldset>
<input id="calculator" type="checkbox" name="">
<label>Used our retirement calculator</label>
</fieldset>
<!-- SUBMIT BUTTON -->
<input type="button" id="btn" value="Submit">
<!-- Result options -->
<div id="low" class="results">low results</div>
<div id="medium" class="results">medium results</div>
<div id="high" class="results">high results</div>
</div>
CSS
.results {
display: none;
}
Aucun commentaire:
Enregistrer un commentaire