How to add new div tag when check box is checked using jquery
Question
how to add new div tag next to check box when check box is checked and also when two check box is checked the two div tag must to be display. please help and make me to solve this module using jquery
Solution
$(':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();
}
});
If you wan't to add this new div next to the checkbox' label then first make sure you have id's set for your checkboxes and that use for attribute in labels to connect labels with checkboxes:
<label for="myCb1">test</label>
<input type="checkbox" id="myCb1" value="1" />
Now you can just modify JS code above a bit and you are done:
$(':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();
}
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow