Проверьте, изменилось ли состояние флажка на 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 
    } 
}); 

Чтобы добавить контекст к комментариям: В приведенных выше примерах ранее использовался селектор $("[name='i']"), потому что я лечил checkbox.name = i, как строка, вместо переменной, которой она была.

Что касается делая каждый флажок появляется на новой линии, вы могли бы <p></p> теги, <br /> теги, <div></div> tags-- действительно любой тег, который группирует элементы или имеет пробелы. Кроме того, вы можете использовать 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().