显示/隐藏部分，具体取决于选中的复选框

Question

我有一个Javascript脚本，它会在单击最后一个单选按钮时显示/隐藏，然后有两个复选框，当它们打开时将显示一个隐藏部分，如下面的屏幕快照所示：

我希望“确认”部分停留在此处，只要选中至少一个复选框即可。我不知道为什么只要选中一个复选框，它就不会保持活动状态。

请使用运行的代码段来测试功能。

如果有人可以帮助我，我将非常感谢！

const formWrapperCertainSelection = document.getElementById('form-wrapper-certain-selection');

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

document.getElementById('rtd3Transaction').addEventListener('change', (e) => {
    if (e.target.checked) {
        formWrapperCertainSelection.style.display = ''
    } else {
        formWrapperCertainSelection.style.display = 'none'
    }
});

document.getElementById('rtd3Device').addEventListener('change', (e) => {
    if (e.target.checked) {
        formWrapperCertainSelection.style.display = ''
    } else {
        formWrapperCertainSelection.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 id='form-wrapper-certain-selection' style="display: none;">
            <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]" required>
                        <label class="custom-control-label" for="rtdConfirm">I confirm that I would like FleishmanHillard not to sell your personal information to third parties.</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您只需要稍微改变条件语句即可。

if (e.target.checked)

应成为：

if (e.target.checked || document.getElementById("theOtherCheckBoxID").checked)

这样，如果两个框都被禁用，则条件只会打到else { //display: none }块。

const formWrapperCertainSelection = document.getElementById('form-wrapper-certain-selection');

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

document.getElementById('rtd3Transaction').addEventListener('change', (e) => {
    if (e.target.checked || document.getElementById("rtd3Device").checked) {
        formWrapperCertainSelection.style.display = ''
    } else {
        formWrapperCertainSelection.style.display = 'none'
    }
});

document.getElementById('rtd3Device').addEventListener('change', (e) => {
    if (e.target.checked || document.getElementById("rtd3Transaction").checked) {
        formWrapperCertainSelection.style.display = ''
    } else {
        formWrapperCertainSelection.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 id='form-wrapper-certain-selection' style="display: none;">
            <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]" required>
                        <label class="custom-control-label" for="rtdConfirm">I confirm that I would like FleishmanHillard not to sell your personal information to third parties.</label>
                    </div>
                </div>
            </div>
        </div>
    </div>