Javascript Twitter引导单选按钮上的onclick事件

我有一个Twitter引导按钮收音机，并将onclick事件挂到它上。但我如何检查哪些按钮被触发

---

我的第一个想法是简单地检查类“active”，但这应该会创建一个竞争条件结果，这取决于是首先处理Twitter引导事件还是我自己的onclick事件。

我会使用更改事件，而不是像这样的单击：

$('input[name="name-of-radio-group"]').change( function() {
  alert($(this).val())
})

$('.btn-primary').on('click', function(){
    alert($(this).find('input').attr('id'));
}); 

---

不要使用“数据切换”属性，以便您可以自己控制切换行为。因此，它将避免“竞争条件”

我的代码：

用.erb编写的按钮组模板，嵌入式ruby for ruby on rails：

<div class="btn-group" id="featuresFilter">
     <% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %>
</div>

---

单击按钮后将触发onChangeFeatures功能。

查看Twitter引导页面上单选按钮的示例HTML，您可以看到每个输入都有一个唯一的ID属性，即optionRadios1和optionRadios2

$('.controls').find('input').bind('click',function(event){ if($(this).attr('id')==='optionsRadios1'){ alert($(this).attr('id')); } else { //... call some other function } }); 为了完整起见，此处包含了相关的HTML示例代码段：

<div class="controls"> <label class="radio"> <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two can is something else and selecting it will deselect option one </label> </div>

---

这真是一个令人讨厌的问题。我最终使用的是：

首先，创建一组没有数据切换属性的简单按钮

<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>

---

我需要对一个图表做同样的事情，在这个图表中，您可以选择应该显示的数据周期

因此，我引入了CSS类“btn group radio”，并使用了以下不引人注目的javascript一行代码：

// application.js
$(document).ready(function() {
  $('.btn-group-radio .btn').click(function() {
    $(this).addClass('active').siblings('.btn').removeClass('active');
  });
});

以下是HTML：

<!-- some arbitrary view -->
<div class="btn-group btn-group-radio">
  <%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %>
  <%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %>
  <%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %>
  <%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %>
  <%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %>
  <%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %>
</div>

对于Bootstrap 3，默认单选/按钮组结构为：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

---

我看到了很多复杂的答案，而这在Bootstrap 3中非常简单：

步骤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>

---

如果您的html与示例类似，那么单击事件是在标签上生成的，而不是在输入中生成的，因此我使用下一个代码： Html示例：

---

我搜索了这么多页：我找到了一个漂亮的解决方案。请查看：

---

想一想，但根据W3C的说法，onchange事件仅由触发。与推荐的Twitters不同。这只在Chrome中有效：Firefox和其他浏览器不会触发更改事件，因为Bootrap至少在3.0中是这样工作的。在最新的文档中，3.0 Bootstrap似乎建议对分组按钮使用input type=复选框：这对我有帮助。。。我遇到了一个问题，在引导库更改按钮的切换状态之前，我的单击处理程序会关闭，所以我的代码总是认为按钮已切换。在更复杂的情况下，最好自己处理切换。从技术上讲，在这个场景中没有。一个稍微简洁和优化的对选择器版本的无双重调用：$this.addClass'active'.sides.removeClass'active'；单选按钮不起作用。如果每个单选按钮的作用不同，如何指定哪个是哪个thing@MurhafSousli我不确定我是否理解你的问题。如果您将代码插入我放置//TODO的位置，您应该能够以$this的形式访问新选择的单选按钮。@Nick我非常喜欢您的解决方案，因此我决定将其集成到答案中，以使其更加引人注目。希望你不介意！改进：最好使用mousedown事件，因为按钮的颜色在mousedown未完成单击时会更改。为什么在输入具有value属性时使用id字段作为值？感谢您发布此问题的答案！堆栈溢出时不鼓励只使用代码的答案，因为没有上下文的代码转储无法解释解决方案的工作方式或原因，这使得原始海报或任何未来读者很难理解其背后的逻辑。请编辑您的问题，并对您的代码进行解释，以便其他人可以从您的答案中受益。这是我同意的最佳解决方案。@bonez我添加了一个提琴，请详细说明为什么它不适合您。在寻找解决方案时遇到了这个问题，在本例中，让您的提琴查找put控制台的选中条件。log$this.is'：checked'；进入函数并观察结果。现在单击预先选择的检查-每次都返回false。现在检查另一个按钮-哦，看，是的，现在再次单击同一个按钮-返回到false。所以这不是一个理想的解决方案。在我最新的Chrome上，这个很好用。这里有一个更新的小提琴，我用来测试它：。在哪个浏览器中会失败？@SgtOddball您注意到的问题几年前已经解决，小提琴仍然使用3.0.0，抱歉

$('.btn-primary').on('click', function(){
    alert($(this).find('input').attr('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>

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

<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>      
</div>

$('#option1').parent().on("click", function () {
   alert("click fired"); 
});

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script>
        $(function() {
            $("#my_launch_today_chk").change(function() {
                var chk = $(this).prop('checked');
                if(chk == true){
                    console.log("On");
                }else{
                    console.log("OFF");
                }
            });
        });
    </script>
</head>
<body >

<input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small">
</body>
</html>