web-dev-qa-db-fra.com

Twitter Bootstrap onclick sur les boutons-radio

J'ai un Twitter Bootstrap buttons-radio et lui associe un événement onclick. Mais comment puis-je vérifier lequel des boutons a été déclenché?

Ma première idée a été de simplement 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).

javascriptjquerytwitter-bootstraptwitter-bootstrap-3jquery-events
58
Daniel O

C'est vraiment un ennuyeux. Ce que j'ai fini par utiliser est la suivante:

Tout d’abord, créez un groupe de boutons simples sans data-toggle 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, écrivez un gestionnaire d'événements qui simule l'effet du bouton radio en "activant" celui sur lequel vous avez cliqué et en "désactivant" tous les autres boutons. (EDIT: Integrated Nick version plus propre des commentaires.)

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

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

Je vois beaucoup de réponses compliquées, alors que cela est super simple dans Bootstrap 3:

Étape 1: Utilisez le code d'exemple officiel pour créer votre groupe de boutons radio et attribuez un identifiant au conteneur:

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

Étape 2: Utilisez ce gestionnaire jQuery:

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

essayez la démo de violon

65
marcovtwout

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

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

Pour Bootstrap 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'));
});
9
paulalexandru

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, intégré Ruby 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é.

6
mark

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

J'ai cherché tellement de pages: j'ai trouvé une belle solution. Vérifiez-le:

lien 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>
1
Jakir Hossen

En regardant l'exemple HTML pour les boutons radio sur la page Twitter Bootstrap ( http://Twitter.github.com/bootstrap/base-css.html#forms ) , vous pouvez voir que chaque entrée a un attribut ID unique, c’est-à-dire optionsRadios1 et optionsRadios2.

L'extrait d'exemple HTML pertinent est inclus ici pour plus de détails:

 <div class = "controls"> 
 <label class = "radio"> 
 <type d'entrée = "radio" vérifié = "" valeur = "option1" id = " optionsRadios1 "name =" optionsRadios "> 
 La première option est la suivante: assurez-vous d’inclure pourquoi il est si bon 
 </ label> 
 <label class =" radio "> 
 <type d'entrée = "radio" valeur = "option2" id = "optionsRadios2" nom = "optionsRadios"> 
 La deuxième option est différente et sa sélection désélectionnera l'option un 
. </ label> 
 </ div>

Vous pouvez donc utiliser un événement de clic jQuery, puis utiliser la référence this pour examiner l'id de l'élément HTML sur lequel vous avez cliqué.

 $ ('. contrôles'). find ('entrée'). bind ('clic', fonction (événement) {
 if ($ (this) .attr ('id') = == 'optionsRadios1') {
 alert ($ (this) .attr ('id')); 
} else {
 // ... appeler une autre fonction 
} 
});
1
pnairn