Javascript HTML复选框数组设置onclick答案

【问题标题】：Javascript HTML checkbox array set onclickJavascript HTML复选框数组设置onclick
【发布时间】：2015-01-29 17:13:36
【问题描述】：

我有一个复选框数组，我将它们传递给一个函数，目的是为每个框设置一个侦听器。

此时，我希望侦听器做的就是在警报框中显示每个复选框的 id 和值。这两个属性在传递到此函数之前都已设置。

创建数组，然后使用以下行传递：

var oCustomMultiSelect = new customMultiSelect(oCheckBoxes);

然后使用以下方法激活侦听器：

function customMultiSelect(pCheckBoxes)
{        
    for (i = 0; i < pCheckBoxes.length; i++) {
        pCheckBoxListener(pCheckBoxes[i])
    }
}

这是设置监听器的方法：

function pCheckBoxListener(pCheckBox)
{
    alert("Value " + pCheckBox.value + " ID " + pCheckBox.id);
}

我目前使用的方法将显示正确的值，但不是 onclick，它会在构建时显示它们。我希望它在单击它们时显示它们。

我认为这是一个非常简单的问题，但我找不到正确的方法来实现这一点。

【问题讨论】：

stackoverflow.com/questions/11791296/…
您没有分配函数（使用pCheckBoxListener(pCheckBoxes[i])），而是调用函数。顺便说一句，如果您包含足够的代码来重现问题（请参阅：“MCVE”）并提供“Stack Snippet”或指向 [JS Fiddle（@987654324 @) 或类似的现场演示网站将是一个有用的奖励。

标签： javascript html checkbox onclick

【解决方案1】：

根据 David 的评论，您需要分配一个事件处理程序，而不是在循环中调用函数。

http://jsfiddle.net/qfbee5ot/

var oCheckBoxes = document.getElementsByName("cb");
var oCustomMultiSelect = new customMultiSelect(oCheckBoxes);

function customMultiSelect(pCheckBoxes) {
    for (i = 0; i < pCheckBoxes.length; i++) {
        //pCheckBoxListener(pCheckBoxes[i])
        addEventHandler(pCheckBoxes[i], pCheckBoxListener);
    }
}

function addEventHandler(element, func) {
    if (element.addEventListener) {
        element.addEventListener("click", func, false);
    } else {
        element.attachEvent('onclick', func);
    }
}

function pCheckBoxListener(e) {
    var pCheckBox = e.target;
    alert("Value " + pCheckBox.value + " ID " + pCheckBox.id);
}

【讨论】：

【解决方案2】：

您可以在customMultiSelect 中为所有复选框添加点击事件监听器：

function customMultiSelect(pCheckBoxes)
{
    for (var i = 0; i < pCheckBoxes.length; i++) {
        pCheckBoxes[i].addEventListener('click', function () {
            pCheckBoxListener(this);
        });
    }
}

见demo

【讨论】：