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>

标签： javascripthtml

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>