¿Hay alguna manera de verificar si una casilla de verificación está marcada cuando agrega otra casilla de verificación mediante programación? Por ejemplo, si tengo una función que agrega una casilla de verificación y luego está marcada y luego agrega otra casilla de verificación, la segunda casilla de verificación determina si la primera casilla de verificación está seleccionada o no. Si la primera casilla de verificación está seleccionada, no muestre la segunda casilla de verificación agregada. Si la primera casilla de verificación no está seleccionada, puede marcar la segunda casilla de verificación y la primera está oculta.
Se supone que el código que tengo a continuación oculta cualquier casilla de verificación que se agregue después de seleccionar la primera casilla de verificación.
$(document).on( "click", '.add', function() { // programmatically add checkboxes $('.add').after("<div id='cover_photo_set_featured'><input type='checkbox'></input>Set featured image</div><div class='add2'>+add</div>").remove(); }); $(document).on( "click", '.add2', function() { $('.add2').after("<div id='cover_photo_set_featured'><input type='checkbox'></input>Set featured image</div>").remove(); }); // function to check is checkboxes are selected if ($("#cover_photo_set_featured input").is(':checked')) { $('#cover_photo_set_featured input[type=checkbox]').each(function() { //Check if the box is checked var x = $(this).is(':checked'); //if checkbox is NOT checked if(x === false) { //Hide the choice $(this).parent().hide(); } }); } else { $('#cover_photo_set_featured input[type=checkbox]').parent().show(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add">+add</div>En javascript solo puede agregar eventos a elementos que ya están en el DOM. Para lograr lo que quieres. tiene que reasignar eventos cada vez que agrega una casilla de verificación.
Recomendaría agregar una función que agregue detectores de eventos de esta manera:
function setup() { if ($("#cover_photo_set_featured input").is(':checked')) { $('#cover_photo_set_featured input[type=checkbox]').each(function() { //Check if the box is checked var x = $(this).is(':checked'); //if checkbox is NOT checked if(x === false) { //Hide the choice $(this).parent().hide(); } }); } else { $('#cover_photo_set_featured input[type=checkbox]').parent().show(); } }luego llamarlo cada vez que agregue una nueva casilla de verificación.