javascript - 如何在 jQuery 中模拟单选按钮功能？

Question

我有 3 个按钮，每个按钮都有一个复选框：

<div id="btn_group">
    <button class="btn"><i class="icon-check-empty"></i> One</button>
    <button class="btn"><i class="icon-check-empty"></i> Two</button>
    <button class="btn"><i class="icon-check-empty"></i> Three</button>
</div>

我当前的 jQuery 看起来像这样：

$('.btn').on('click',function() {
    $('#btn_group > .btn > i').removeClass('icon-check').addClass('icon-check-empty');
    $(this).children('i').toggleClass('icon-check-empty icon-check');
});

这是需要发生的事情：

1）单击按钮1：按钮1选中，所有其他未选中

2) 再次单击按钮 1：按钮 1 未选中，所有其他按钮仍未选中

3）点击按钮1：（见#1）

4) 单击按钮 2：按钮 2 已选中，其他所有未选中（如单选按钮）

基本上我需要一组单选按钮，允许您取消选中当前选择，但不允许选择多个。全部通过 JS 和 jQuery 模拟。你能帮我吗？

Answer 1

你可以用一个班级来做到这一点。

$('.btn').on('click',function() {
    $(this).toggleClass('icon-check').siblings().removeClass('icon-check');
}