Twitter启动onclick事件按钮-收音机

I have a Twitter Bootstrap buttons-radio and hook an onclick event to it. But how do I check which of the buttons that got triggered?

我有一个Twitter Bootstrap按钮——收音机，并将onclick事件连接到它。但是我怎么检查哪个按钮被触发了呢?

My first thought was to simply check for the class 'active', but this should create a race condition (result depends on whether the Twitter Bootstrap event or my own onclick event is handled first).

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

9 个解决方案

#1

This is a really annoying one. What I ended up using is this:

这真的很烦人。我最后用的是

First, create a group of simple buttons with no data-toggle attribute.

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

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

Next, write an event handler that simulates the radio button effect by 'activating' the clicked one and 'deactivating' all other buttons. (EDIT: Integrated Nick's cleaner version from the comments.)

接下来，编写一个事件处理程序，通过“激活”单击的按钮和“停用”所有其他按钮来模拟单选按钮的效果。(编辑:从评论中集成了尼克的简洁版本。)

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

    // TODO: insert whatever you want to do with $(this) here
});

#2

I see a lot of complicated answers, while this is super simple in Bootstrap 3:

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

Step 1: Use the official example code to create your radio button group, and give the container an id:

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

Step 2: Use this jQuery handler:

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

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

Try the fiddle demo

试着小提琴演示

#3

I would use a change event not a click like this:

我会使用改变事件而不是像这样点击:

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

#4

For Bootstrap 3 the default radio/button-group structure is :

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

And you can select the active one like this:

你可以像这样选择一个活动的

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

#5

Don't use data-toggle attribute so that you can control the toggle behavior by yourself. So it will avoid 'race-condition'

不要使用data-toggle属性，这样你就可以自己控制切换行为。这样可以避免“种族状况”

my codes:

我的代码:

button group template (written in .erb, embedded ruby for ruby on rails):

按钮组模板(用.erb编写，ruby on rails嵌入ruby):

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

and javascript:

和javascript:

onChangeFeatures = function(e){
        var el=e.target;
        $(el).button('toggle');

        var features=el.parentElement;
        var activeFeatures=$(features).find(".active");
        console.log(activeFeatures);
}

onChangeFeatures function will be triggered once the button is clicked.

onChangeFeatures函数将在单击按钮后被触发。

#6

I needed to do the same thing for a chart where you could select the period of the data that should be displayed.

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

Therefore I introduced the CSS class 'btn-group-radio' and used the following unobtrusive javascript one-liner:

因此，我引入了CSS类“btn-group-radio”，并使用了以下不显眼的javascript一行代码:

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

And here is the HTML:

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

#7

Looking at the example HTML for radio buttons on the Twitter Bootstrap page (http://twitter.github.com/bootstrap/base-css.html#forms), you can see that each input has a unique ID attribute, i.e. optionsRadios1 and optionsRadios2.

查看Twitter引导页面(http://twitter.github.com/bootstrap/base-css.html#forms)上的单选按钮示例HTML，可以看到每个输入都有一个惟一的ID属性，即optionsRadios1和optionsRadios2。

The relevant HTML example snippet is included here for completeness:

这里包含了相关的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>

So you can use a jQuery click event, and then use the this reference to look at the id of the HTML element that was clicked.

因此，您可以使用jQuery单击事件，然后使用此引用查看所单击的HTML元素的id。

$('.controls').find('input').bind('click',function(event){
  if($(this).attr('id')==='optionsRadios1'){
    alert($(this).attr('id'));
  } else {
    //... call some other function
  }
});

#8

I searched so many pages: I found a beautiful solution. Check it out:

我搜索了这么多页:我找到了一个漂亮的解决方案。检查一下:

git link

git链接

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

#9

If your html is similar to the example, so the click event is produced over the label, not in the input, so I use the next code: Html example:

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

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

Javascript code for the event:

事件的Javascript代码:

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