Evénement Twitter Bootstrap onclick sur les boutons-radio

Question

J'ai une radio-boutons Twitter Bootstrap et j'y branche un événement onclick. Mais comment puis-je vérifier lequel des boutons s’est déclenché?

Ma première pensée était simplement de vérifier la classe 'active', mais cela devrait créer une condition de concurrence critique (le résultat dépend du fait que l'événement Twitter Bootstrap ou mon propre événement onclick soit traité en premier).

Answer 1

C'est vraiment gênant. Ce que j'ai utilisé est:

Tout d'abord, créez un groupe de simples boutons sans data-toggle d'attribut.

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

Ensuite, écrire un gestionnaire d'événement qui simule le bouton radio effet par 'activer' l'cliqué sur l'un et "désactiver" tous les autres boutons.

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

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

EDIT: Nick a proposé une même version plus propre dans les commentaires ci-dessous:

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

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

Si vous êtes d'accord que c'est encore mieux, merci de upvote son commentaire! Je l'ai fait, et je vais utiliser sa version à la place de la mine à partir de maintenant.

Answer 2

Je voudrais utiliser un événement de changement pas un clic comme ça:

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

Answer 3

Pour Bootstrap 3, la structure par défaut du groupe radio / boutons est la suivante:

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

Et vous pouvez sélectionner l'actif comme ceci:

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

Answer 4

N'utilisez pas l'attribut data-toggle pour pouvoir contrôler vous-même le comportement de bascule. Donc, cela évitera les "conditions de course"

mes codes:

modèle de groupe de boutons (écrit en .erb, ruby intégré pour ruby sur rails):

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

et javascript:

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

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

La fonction onChangeFeatures sera déclenchée une fois le bouton cliqué.

Answer 5

Je devais faire la même chose pour un graphique où vous pouvez sélectionner la période des données à afficher.

Par conséquent, j'ai introduit la classe CSS 'btn-group-radio' et utilisé le javascript one-liner non intrusif suivant:

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

Et voici le 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>