Question

I have a set groups with a checkbox, I am trying to get the value of each checkbox when is checked and appending this value to a counter span element i have next to it, but every time i click on any of the checkboxes is appending the value to all the counter elements. I created a http://jsfiddle.net/creativestudio/xm838/

This is the Js I am using:

function set_index_id_checkbox() {
    $("input:checkbox[name='like']").each(function (index) {
        var currElem = $(this);
        var prevLabel = currElem.next();
        currElem.attr("id", this.id + index);
        prevLabel.attr("for", prevLabel.attr("for") + index);
    });
}

set_index_id_checkbox();

function getValues() {
    $("input:checkbox[name='like']").click(function () {
        if ($(this).is(':checked')) {
            $('.likes').html($(this).val());
        }
    });
}

getValues();

Answer 1

That’s because you are selecting all the elements with class of likes, you can use prev and find or closest methods for selecting the target element.

$(this).parent().prev().find('.likes').html(this.value);

or:

if (this.checked) { // better than creating an unnecessary jQuery object
   $(this).closest('.block').find('span.likes').text(this.value);
} else {
  // ...
}

http://jsfiddle.net/Ud9T4/