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

Question

我有一些日期输入，但我只想在用户单击单选按钮时显示它们 "Date Range"。所以我的 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 />

我更愿意使用 html.radiobutton，但 w/e 有效。

现在我的折叠函数如下所示：

function addCollapsibleCapabilities(coll) {
    for (var i = 0; i < coll.length; i++) {
        coll[i].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.getElementById("radioTimeFilter");
    addCollapsibleCapabilities(collapseDateRange);

我的警报没有触发。

Answer 1

您希望 collapseDateRange 为数组，而当您使用 document.getElementById() 选择元素时，情况并非如此。它总是会给你一个元素对象。只需删除 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);

以上代码将为您提供 NodeList 数组，您可以使用 forloop 代码遍历每个单选按钮并设置 click 事件侦听器。

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

How to add event listeners to radio button - mines not firing

javascript

c#

event-listener

dom-events