javascript - 检查 Javascript 上复选框的状态何时更改

Question

我使用 JavaScript 动态创建了一些复选框(如下)，关于如何在单击复选框时调用函数(其状态已更改)有什么想法吗？

var eng_types = table[3].slice(3);
for(var i in eng_types) {
    var name = eng_types[i];

    // Create the necessary elements
    var label = document.createElement("label");
    var checkbox = document.createElement("input");
    var description = document.createTextNode(name);

    checkbox.type = "checkbox";     // Make the element a checkbox
    checkbox.value = name;          // Make its value "pair"
    checkbox.name = i;              // Give it a name we can check

    label.appendChild(checkbox);    // Add the box to the element
    label.appendChild(description); // Add the description to the element

    // Add the label element to your div
    document.getElementById('eng_options').appendChild(label);
}

任何有关如何使每个复选框显示在新行上的想法也将不胜感激。

提前致谢!

Answer 1

使用jQuery checkbox checked state changed event :

$("#i").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

由于您要动态添加元素，因此更强大的解决方案可能是使用它(感谢 @IgorAntun 提到 bind 和 on ):

$(document).on("change", "#i", function() { 
    if(this.checked) {
        //Do stuff
    }
});

To add context to the comments: The above examples previously used the selector $("[name='i']"), because I was treating checkbox.name = i like a string, instead of the variable that it was.

关于使每个复选框显示在新行上，您可以 <p></p>标签，<br />标签，<div></div>标签——实际上是任何对元素进行分组或具有间距的标签。此外，您还可以使用 CSS。我最喜欢这种方法，因为它允许调整复选框的间距，而 HTML 标记则无法做到这一点。

input {
    display: block;
    margin-top: 2px;
}