如何檢查下一個複選框？

Question

我面對的問題是我有相同的「按鈕複選框」，但是一旦點擊其中一個，我只想要最接近的複選框選中並取消選中。

<span class="button-checkbox"> 
    <button type="button" class="btn btn-sm btn-default btn-private"> 
     <i class="fa fa-square-o private"></i> 
    <button> 
    <input name="private" type="checkbox" class="hidden" /> 
</span> 
<span class="button-checkbox"> 
    <button type="button" class="btn btn-sm btn-default btn-private"> 
     <i class="fa fa-square-o private"></i> 
    <button> 
    <input name="private" type="checkbox" class="hidden" /> 
</span> 

我目前使用的JavaScript代碼是：

$(document).on("click", ".btn-private", function() { 

    $(this).find("i").toggleClass('fa-square-o fa-check-square-o'); 
    $(this).find('input:checkbox').prop("checked", true); 

}) 

出於某種奇怪的原因，$(this).find("i").toggleClass('fa-square-o fa-check-square-o');正確切換的類，但似乎$(this).find('input:checkbox')不能正確選擇，因爲如果我手動分配ID和$('#ID').prop("checked", true);它得到正確檢查。

有關我如何解決此問題的任何想法以及如何取消選中點擊框，我們將不勝感激！

Answer 1

$(this).find('input:checkbox').prop("checked", true);正在尋找button內部的input。

嘗試按鈕後，看着下一個元素：

$(this).next().find('input:checkbox').prop("checked", true);

這裏是一個工作codepen： http://codepen.io/ZevanRosser/pen/wgjOQE

Answer 2

使用

$(document).on("click", ".btn-private", function() { 
    $(this).find("i").toggleClass('fa-square-o fa-check-square-o'); 
    $(this).next().prop("checked", true); // here 
}) 

否則，你在裏面找複選框按鈕。