Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74074

Radio button show/hide won't hide on other radio button clicks

$
0
0

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)
enter image description here

When selecting the last radio button, I have it showing the below fields. (Works great) enter image description here

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?
enter image description here

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>

Viewing all articles
Browse latest Browse all 74074

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>