javascript - 单选按钮显示/隐藏不会在其他单选按钮点击时隐藏

Question

请运行代码片段以查看示例。

所以我正在使用一些单选按钮，并且第三个单选按钮具有隐藏内容，除非已检查它，但当选择另一个单选按钮时我无法让它再次隐藏内容。

屏幕截图:
选择最后一个以外的单选按钮时，没有任何显示(效果很好)

当选择最后一个单选按钮时，我让它显示以下字段。 (效果很好)

当我返回选择另一个单选按钮时，第三个单选按钮中的项目仍然显示，我希望它们隐藏 - 我的 JS 可能做错了什么？

这是代码:

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>

Answer 1

选择不同的单选选项不会触发rtd3的change事件。相反，将一个事件附加到所有单选按钮，以检查是否应隐藏或显示“特定”部分。

const toggleCertainForm = () => {
  const formWrapper = document.getElementById('form-wrapper-certain');
  const rtd3 = document.getElementById('rtd3');
  formWrapper.style.display = rtd3.checked ? '' : 'none';
}

document.querySelectorAll('[name="rtd[checked]"]').forEach(r => 
  r.addEventListener('change', toggleCertainForm)
);

const toggleCertainForm = () => {
  const formWrapper = document.getElementById('form-wrapper-certain');
  const rtd3 = document.getElementById('rtd3');
  formWrapper.style.display = rtd3.checked ? '' : 'none';
}

document.querySelectorAll('[name="rtd[checked]"]').forEach(r => 
  r.addEventListener('change', toggleCertainForm)
);

<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>

鉴于您已标记 jQuery，这里有一个使用事件委托(delegate)的替代解决方案:

const toggleCertainForm = () => $('#form-wrapper-certain').toggle($("#rtd3").is(":checked"));
$(document).on("change", '[name="rtd[checked]"]', toggleCertainForm);

const toggleCertainForm = () => $('#form-wrapper-certain').toggle($("#rtd3").is(":checked"));
$(document).on("change", '[name="rtd[checked]"]', toggleCertainForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>