Question

我面临的问题是我有相同的＆＃34;按钮复选框＆＃34;，但是一旦点击其中一个，我只想要最近的复选框检查并取消选中。

<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

使用

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

否则你正在寻找按钮内的复选框。

Answer 2

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

尝试查看按钮后面的下一个元素：

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

这是一个工作的codepen： http://codepen.io/ZevanRosser/pen/wgjOQE

如何检查下一个复选框？

2 个答案: