Question

我创建了一个自定义复选框列表。目前你只能选择一个非常棒的复选框;但是我也希望切换当前“活动”的复选框。

感谢任何帮助，我一直试图解决这个问题超过一个小时：）

这是我的代码：

HTML：

<ul>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 1</a>
    </li>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 2</a>
    </li>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 3</a>
    </li>
</ul>

CSS：

// I am using borders to represent a checked/unchecked box for demonstration

.active {
    color: red;
}

// Non-checked box
.fa-square-o {
    border-style: solid;
    border-width: 0px;
}
// Checked-box
.fa-check-square-o {
    border-style: solid;
    border-width: 1px;
}

jQuery的：

$('li a').bind('click', function() {
    $('li a').not(this).removeClass("active");
    $('li a i').not(this).removeClass("fa-check-square-o").addClass("fa-square-o");
    $(this).toggleClass('active');
    $(this).children("i").toggleClass("fa-square-o fa-check-square-o");
});

Answer 1

以下内容未选择您想要的内容：

$('li a i').not(this)

它会获取所有<i>元素，但不会删除点击的<a>元素中的元素，因为this是单击的<a>元素，而不是{{1单击的<i>元素内的元素。

改为使用：

<a>

此外，我希望您没有在CSS中使用$('li a').bind('click', function () { $('li a').not(this).removeClass("active").children("i").removeClass("fa-check-square-o").addClass("fa-square-o"); $(this).toggleClass('active').children("i").toggleClass("fa-square-o fa-check-square-o"); });进行评论，而只是在问题中添加了这些评论。

jsfiddle

jQuery - 如何切换自定义复选框，一次只激活一个复选框？

1 个答案: