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
    }
});

为评论添加上下文：上面的示例以前使用了选择器$("[name='i']")，因为我将checkbox.name = i视为字符串，而不是变量。

关于使每个复选框显示在新行上，您可以<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 } });

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

检查复选框何时在Javascript上更改其状态

2 个答案: