单选按钮显示/隐藏不会在其他单选按钮单击上隐藏

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的更改事件。而是将事件附加到所有单选按钮上，以检查是否应隐藏或显示“某些”部分。

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，这是利用事件委托的另一种解决方案：

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>

Answer 2

此更改操作：

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

仅在该特定单选按钮（ID为“ rtd3”的那个）中调用事件 change 而不在其他两个单选按钮中调用时触发。

一种可能的解决方案是为其他两个单选按钮重现此行为，例如：

document.getElementById('rtd1').addEventListener('change', (e) => {
    if (e.target.checked) {
        document.getElementById('form-wrapper-certain').style.display = 'none'
    }
});

document.getElementById('rtd2').addEventListener('change', (e) => {
    if (e.target.checked) {
        document.getElementById('form-wrapper-certain').style.display = 'none'
    }
});

或者尝试使用其他方法，希望能对您有所帮助。

Answer 3

Hello SaintLouis活动，

在这种情况下，我认为您缺少复选框和单选按钮的主要属性之一，即checked。

我要做的是这样的：

$("#rtd1").click(function() {
    if($(this).prop("checked")) {
        // this runs when the #rtd1 element is checked
        $("#form-wrapper-certain").hide();
        $("#form-wrapper-certain input[type='checkbox']").prop("checked", false);
        // If you want you can also disable those checkboxes
        $("#form-wrapper-certain input[type='checkbox']").prop("disabled", true);
    }
});

$("#rtd2").click(function() {
    if($(this).prop("checked")) {
        // this runs when the #rtd2 element is checked
        $("#form-wrapper-certain").hide();
        $("#form-wrapper-certain input[type='checkbox']").prop("checked", true);
        // This second line is optional, I assume you are sending all your checkboxes
        // besides from sending the #rtd2 element
        // If you want you can also enable those checkboxes if they have been disabled
        $("#form-wrapper-certain input[type='checkbox']").prop("disabled", false);
    }
});

$("#rtd3").click(function() {
    if($(this).prop("checked")) {
        // this runs when the #rtd3 element is checked
        $("#form-wrapper-certain").show();
        $("#form-wrapper-certain input[type='checkbox']").prop("checked", true);
        // This second line depends on the behavior you want to achieve
        // you can either check all as initial state or uncheck all as initial state
        // If you want you can also enable those checkboxes if they have been disabled
        $("#form-wrapper-certain input[type='checkbox']").prop("disabled", false);
    }
});

if($(this).prop("checked"))可以是可选的，因为单选按钮始终会在单击时被选中，除非它们被禁用。

此外，我看到您的示例在JavaScript中，但是您在标记中提到了jQuery，所以我在jQuery中创建了示例。

更新

将$(this).is(":checked")更改为$(this).prop("checked")以使示例保持使用jQuery，并且与原始问题更加相似。