检查复选框的状态何时更改 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;
}

Answer 2

您也可以使用 .bind('change', [...]) 或 .on('change', [...]) 作为@IronFlare 答案的替代方法。 示例：

使用.bind('change'):

$('#item-to-check').bind('change', function() {
    if(this.checked) {
        // Element is checked
    } else {
        // Element is not checked
    }
});

使用.on('change'):

$('#item-to-check').on('change', function() {
    if(this.checked) {
        // Element is checked
    } else {
        // Element is not checked
    }
});

此外，我建议查看 Matt 在 What is best way to perform jQuery .change() 上的回答。

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

Check when a checkbox has its state changed on Javascript

javascript

checkbox

jquery