Come aggiungere un nuovo tag div quando la casella è selezionata usando jquery
Domanda
come aggiungere un nuovo tag div accanto alla casella di controllo quando la casella di controllo è selezionata e anche quando è selezionata la casella di controllo due, è necessario visualizzare i due tag div. per favore aiutami e fammi risolvere questo modulo usando jquery
Soluzione
$(':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();
}
});
Se non desideri aggiungere questo nuovo div accanto all'etichetta della casella di controllo, assicurati innanzitutto di avere ID impostato per le caselle di controllo e che utilizzino l'attributo nelle etichette per connettere le etichette con le caselle di controllo:
<label for="myCb1">test</label>
<input type="checkbox" id="myCb1" value="1" />
Ora puoi semplicemente modificare un po 'il codice JS sopra e hai finito:
$(':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();
}
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow