Please run the code snippet to view an example.
So I'm using some radio buttons and I have the third radio button have hidden content unless it's been checked but I can't get it to hide the content again when another radio button is selected.
Screenshots:
When selecting a radio button other than the last one, nothing shows (Works great)
When selecting the last radio button, I have it showing the below fields. (Works great)
When I go back to select another radio button, the items still show from the third radio button and I would like them hidden - What could I possibly be doing wrong with my JS?
Here is the code:
document.getElementById('rtd3').addEventListener('change', (e) => {
if (e.target.checked) {
document.getElementById('form-wrapper-certain').style.display = ''
} else {
document.getElementById('form-wrapper-certain').style.display = 'none'
}
});<div class="custom-control custom-radio mt-3"><input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd1" value="1" required><label class="custom-control-label" for="rtd1"><i>None</i> of the personal information we have collected from you.</label></div><div class="custom-control custom-radio mt-3"><input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd2" value="2" required><label class="custom-control-label" for="rtd2"><i>All</i> of the personal information we have collected from you (subject to permitted exceptions).</label></div><div class="custom-control custom-radio mt-3"><input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required><label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label><div class="invalid-feedback">
Select what information you would like deleted.</div></div><div id='form-wrapper-certain' style="display:none"><div class="row mt-3"><div class="col-sm-1"></div><div class="col-sm-11"><i>You must specify the personal information you would like us to delete:</i></div></div><div class="row mt-3"><div class="col-sm-1"></div><div class="col-sm-11"><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]"><label class="custom-control-label" for="rtd3Transaction">My transaction data</label></div></div></div><div class="row mt-3"><div class="col-sm-1"></div><div class="col-sm-11"><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]"><label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label></div></div></div><div class="row mt-3"><div class="col-sm-2"></div><div class="col-sm-10"><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="rtdConfirm" name="rtd[confirm]"><label class="custom-control-label" for="rtdConfirm">I confirm that I would like not to sell your personal information to third parties.</label></div></div></div></div>