javascript - 根据选中的复选框显示/隐藏部分

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 } block 。

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>