試圖創建一個複選框比較元素

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

您需要使用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; 
}); 

此外，在change事件複選框的工作。

Answer 2

你必須使用.prop("checked")得到的選中狀態（http://api.jquery.com/prop/）。這是你的工作示例：http://jsfiddle.net/infous/bLd0gaxy/3/