Cómo agregar una nueva etiqueta div cuando la casilla de verificación está marcada usando jquery
Pregunta
cómo agregar una nueva etiqueta div junto a la casilla de verificación cuando la casilla de verificación está marcada y también cuando se marca la casilla de verificación dos, la etiqueta div dos debe estar visible. Por favor, ayúdame y haz que resuelva este módulo usando jQuery
Solución
$(':checkbox').click(function () {
if ($(this).attr('checked')) {
// create new div
var newDiv = $('<div>contents</div>');
// you can insert element like this:
newDiv.insertAfter($(this));
// or like that (choose syntax that you prefer):
$(this).after(newDiv);
} else {
// this will remove div next to current element if it's present
$(this).next().filter('div').remove();
}
});
Si no va a agregar este nuevo div junto a la etiqueta de la casilla de verificación, primero asegúrese de tener el ID establecido para sus casillas de verificación y que se use como atributo en las etiquetas para conectar etiquetas con casillas de verificación:
<label for="myCb1">test</label>
<input type="checkbox" id="myCb1" value="1" />
Ahora solo puede modificar un poco el código JS y ya está:
$(':checkbox').click(function () {
// current checkbox id
var id = $(this).attr('id');
// checkbox' label
var label = $('label[for=' + id + ']');
if ($(this).attr('checked')) {
// create new div
var newDiv = $('<div>contents</div>');
// insert div element
newDiv.insertAfter(label);
} else {
// this will remove div next to current element if it's present
label.next().filter('div').remove();
}
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow