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

Question

请运行代码 sn-p 查看示例。

So I'm using some radio buttons and I have the third radio button have hidden content unless it's been checked but I can't get it to hide the content again when another radio button is selected.

截图：
选择除最后一个以外的单选按钮时，没有任何显示（效果很好）

选择最后一个单选按钮时，我有它显示下面的字段。 （效果很好）

当我返回选择另一个单选按钮时，项目仍然从第三个单选按钮显示，我希望它们隐藏 - 我的 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'
    }
});

仅当事件 change 在该特定单选按钮（具有 id “rtd3”的单选按钮）中被调用但在其他两个单选按钮中不被调用时触发。

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

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

你好 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 的示例并更类似于原始问题。