So fügen Sie ein neues div-Tag hinzu, wenn das Kontrollkästchen mit jquery aktiviert ist

Question

wie neues div-Tag hinzufügen neben Kontrollkästchen, wenn das Kontrollkästchen aktiviert ist und auch wenn zwei Kontrollkästchen aktiviert ist, muss das zwei div-Tag angezeigt werden. bitte helfen und mich um dieses Modul zu lösen jquery mit

Answer 1

$(':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(); 
    } 
}); 

Wenn Sie wan't diese neue div hinzuzufügen neben dem Kontrollkästchen‘Label dann zuerst sicherstellen, dass Sie ids Set für Ihre Kontrollkästchen haben und dass die Verwendung für Attribut in Etiketten Etiketten mit Checkboxen verbinden:

<label for="myCb1">test</label> 
<input type="checkbox" id="myCb1" value="1" /> 

Jetzt können Sie nur über ein wenig JS-Code ändern und Sie sind fertig:

$(':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(); 
    } 
});