Javascript 如何将事件侦听器添加到单选按钮-未触发地雷

我有一些日期输入，但我只想在用户单击单选按钮“日期范围”时显示它们。 因此，我的html如下所示：

@*@Html.RadioButton("radioTimeFilter", "range", false) Date Range*@
<input id="radioTimeFilter" type="radio" value="false"> Date Range
<div class="radio-content" style="display:none;">
    <input id="txtDateOneFilter" type="text" style="width: 70px;" placeholder="Start Date" />&nbsp;to&nbsp;
    <input id="txtDateTwoFilter" type="text" style="width: 70px;" placeholder="End Date" />
</div>
<br />

---

我的警报没有开火

当您使用

document.getElementById（）

选择元素时，您希望CollapsedTerange是数组，而不是大小写。它将始终为您提供一个元素对象。 只需删除forloop并直接在

coll

对象上设置侦听器

function addCollapsibleCapabilities(coll) {
    coll.addEventListener("click", function () {
        alert(coll);
        this.classList.toggle("active");

        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
}

如果有多个单选元素，可以使用另一个选择器，如下所示。但是为您的无线电元素提供

name

属性，而不是

id

var collapseDateRange = document.getElementsByName("radioTimeFilter");
addCollapsibleCapabilities(collapseDateRange);

---

上面的代码将为您提供节点列表数组，您可以使用forloop代码迭代每个单选按钮并设置

单击

事件侦听器。

radioTimeFilter

是一个控件，因此它没有

.length

。您是否在浏览器开发人员工具中检查了控制台？它应该给你一个错误哦，谢谢你。是的，我把id切换到getElementsByClassName，它成功了

function addCollapsibleCapabilities(coll) {
    coll.addEventListener("click", function () {
        alert(coll);
        this.classList.toggle("active");

        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
}

var collapseDateRange = document.getElementsByName("radioTimeFilter");
addCollapsibleCapabilities(collapseDateRange);