CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

Checkbox is checked then only append it to the div or else remove it if it is unchecked

Please look at the jsfiddle http://jsfiddle.net/6fsf8/

if the checkbox is checked then only i need to append it to the div , if its unchecked then i need to remove it from the div .

I have tried this , but it is keep on appending it to the div .

if($(this).is(':checked'))
{
    $("#fororders").append($(this).attr('value'));

}

And also is it possible that i should display them in a vertical order rather than horizontal order while appending it to the div .

You need to expand all the Accordians to see the checkboxes . Could you please let me know how to resolve this

Upvotes: 0

Views: 897

Answers (4)

Abhitalks
Abhitalks

Reputation: 28387

You need to wrap the text in an element and then append that. That would make it easier for you to target it by id so as to be able to remove it later:

Demo: http://jsfiddle.net/abhitalks/6fsf8/3/

$(document).on("click", ":checkbox", function (e) {
    var v = $(this).val(); // cache the value
    if ($(this).is(':checked')) {
        // create a span with the same id as value and append it
        $("#fororders").append( $("<span>").attr("id", v).text(v) );
    } else {
        // target the span with the same id as value and remove it
        $("#fororders").find("span#" + v).remove();
    }

});

Upvotes: 0

Think Different
Think Different

Reputation: 2815

You have to remove the item from the #fororders div. Have a look at this fiddle

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you can do like this:

if(this.checked)
{
    $("#fororders").append($(this).attr('value'));

}

and instead of click you can use change event:

$(document).on("change", ":checkbox", function (e) {

if(this.checked)
{
    $("#fororders").append($(this).attr('value'));

}


});

UPDATED FIDDLE

Upvotes: 0

FLX
FLX

Reputation: 2679

Your element is append because you don't remove it.

Try something like :

if($(this).is(':checked'))
{

    $("#fororders").append('<div id="something">'+$(this).attr('value')+'</div>');

}else{
    $('#something').remove();
}

To display your elements vertically, add the css property display:block; This is some base CSS, you should not ask this here.

Upvotes: 1

Related Questions