文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在jQuery中模拟单选按钮功能？

问如何在jQuery中模拟单选按钮功能？
EN

Stack Overflow用户

提问于 2013-04-20 08:47:45

回答 1查看 590关注 0票数 0

我有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模拟的。你能帮上忙吗？

twitter-bootstrap

toggleclass

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-20 08:52:09

您可以使用单个类来完成此任务。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16115381

复制

相似问题

问如何在jQuery中模拟单选按钮功能？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中模拟单选按钮功能？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery中模拟单选按钮功能？
EN