按钮上的 Bootstrap onclick事件radio?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (260)

我有一个Bootstrap按钮radio,并挂钩onclick事件。但是,如何检查触发了哪些按钮?

我的第一个想法是简单地检查'active'类,但是这会产生一个竞争条件。

提问于
用户回答回答于

首先,创建一组没有data-toggle属性的简单按钮。

<div id="selector" class="btn-group">
    <button type="button" class="btn active">Day</button>
    <button type="button" class="btn">Week</button>
    <button type="button" class="btn">Month</button>
    <button type="button" class="btn">Year</button>
</div>

接下来,编写一个事件处理程序,通过“激活”点击的按钮和“停用”所有其他按钮来模拟单选按钮效果。

$('#selector button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');

    // TODO: insert whatever you want to do with $(this) here
});
用户回答回答于

步骤1:若要创建单选按钮组,请向容器提供一个id:

<div id="myButtons" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

步骤2:使用这个jQuery处理程序:

$("#myButtons :input").change(function() {
    console.log(this); // points to the clicked input button
});

扫码关注云+社区

领取腾讯云代金券