单选按钮显示/隐藏无法在单击其他单选按钮时隐藏

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>

- user12160926

---

选择不同的单选按钮选项将不会触发 rtd3 的 change 事件。 - Tyler Roper

查看此线程，您将找到有用的信息，这个想法可能是您想要的。 - Ben Souchet

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>

- Tyler Roper

---

谢谢 @Tyler，这非常干净！ - user12160926

Answer 2

你好，圣路易斯活动团队：

在这种情况下，我认为您缺少了复选框和单选按钮的一个主要属性，即 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并与原始问题更相似。

- Mihail Minkov

---

this.checked比$(this).is(':checked')更好。伪选择器:checked主要用于选择器。在这种情况下，您不需要它。您已经有了具有本机checked属性的this，所有浏览器都支持它。 - Taplar

@Taplar 感谢您的观察。我已将 is(':checked') 更改为 .prop('checked')。 - Mihail Minkov

现在，所有浏览器都支持this.checked。没有理由使用一个本地对象，实例化一个jQuery对象并调用方法来获取属性，而该属性已经可用。这种额外的开销是完全不必要的。jQuery很有帮助，可以做很多事情，但你应该始终警惕陷入“jQuery必须做所有事情”的思维误区。 - Taplar

Answer 3

这是一次更改操作：

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”）中调用事件更改时才会触发。

一种可能的解决方案是将此行为复制到另外两个单选按钮中，例如：

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

或者尝试使用不同的方法，希望这能有所帮助。

- Luis Miguel

---

谢谢@Luis Miguel，目前这个方法可行 - 以后会寻找其他方法来缩小代码范围。 - user12160926

@SaintLouisEvents 很高兴能帮到你，虽然这不是一个完美的解决方案，你应该缩小代码范围，但它确实能够完成工作；-) - Luis Miguel