Trying to create a checkbox for comparing elements

Question

So far I manage to show/hide button when checkbox is checked but its checking all checkbox which I don't want.

my goal is to check different checkboxes without ticking all of them at the same time.

Edit: also to count how many elements have been checked.

http://jsfiddle.net/bLd0gaxy/1/

<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>

<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare 2</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>

        $('.compare').click(function() {
        if($('.compare').is(':checked')){
            $('.compare-label').hide();
            $('.compare-btn').show();            
        } else{
            $('.compare-label').show();
            $('.compare-btn').hide();
        }
    });

Answer 1

You have to use .prop("checked") to get the checked state (http://api.jquery.com/prop/). Here is your working example: http://jsfiddle.net/infous/bLd0gaxy/3/

Answer 2

You need to use this to work with the closest elements:

$('.compare').change(function() {
    if (this.checked) {
        $(this).next("label").hide();
        $(this).nextUntil("button").show();
    } else {
        $(this).next("label").show();
        $(this).nextUntil("button").hide();
    }

    var totalChecked = $(".compare:checked").length;
});

Also, work with the change event of the checkbox.