user1022521
user1022521

Reputation: 537

jquery remove corresponsing selection checkbox/radio button on click of a DIV

I have the following fiddle: http://jsfiddle.net/d3qD4/1/

$("#testDiv").html("");

Here I am trying to remove the selection (radio & checkbox) on click of the remove.png click beside each item. Is there a way in jquery to get the corresponsing radio/checkbox name, reverse engineer and remove the checkbox/radio selection? I also need to remove the item from my testDiv on this remove.png click(which be a 'x' mark). Tried selecting the element but nothing seems to work.

Upvotes: 0

Views: 615

Answers (3)

billyonecan
billyonecan

Reputation: 20260

Since you're adding the .bckeys dynamically, you'll need to use on() and delegate the event. You can use the text() of the added element to target the label, then traverse using prev() to uncheck the corresponding input:

$('#testDiv').on('click', '.bckeys', function() {
   var $this = $(this);
   $('label[title=' + $this.text() + ']').prev('input').prop('checked', false);
   $this.remove();
});

Here's a fiddle

Also, make sure you remove those duplicate IDs :)

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

use like this

    $(":checkbox").change(function () {

    $("#testDiv").html("")
    $("input:checked").each(function () {
        $("#testDiv").append($("<span/>", {
            class: 'bckeys',
            html: $(this).next().text().trim() + "<img id=" + $(this).next().attr("title") + " src='" + "http://www.test.com" + "' src='remove.png'>"

        }))

    })

});

$(document).on("click", "img", function () {
    $("[title=" + this.id + "]").prev().toggle();
});

Demo

Upvotes: 0

Andy897
Andy897

Reputation: 7133

Assign an id to the image which corresponds to the respective checkbox id. Then simply use that id to figure out which checkbox value you want to set to unchecked.

Something like : If checkbox id is "check1" .. you can name image id as image_check1 or something

Upvotes: 0

Related Questions