尝试创建用于比较元素的复选框

Question

到目前为止，当复选框被选中时，我设法显示/隐藏按钮，但它选中了所有复选框，这是我不想要的。

我的目标是在不同时勾选所有复选框的情况下选中不同的复选框。

编辑:也可以统计检查了多少个元素。

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

您必须使用.prop("checked")来获取选中状态(http://api.jquery.com/prop/)。以下是您的工作示例：http://jsfiddle.net/infous/bLd0gaxy/3/

Answer 2

您需要使用this来处理最近的元素：

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

另外，使用checkbox的change事件。