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

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

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