如何检查下一个复选框？

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 
}) 

否则，你在里面找复选框按钮。