Twitter Bootstrap evento onclick di un bottone-radio

Ho un Twitter Bootstrap pulsanti radio e il gancio di un evento onclick su di esso. Ma come faccio a verificare che i pulsanti che ha innescato?

Il mio primo pensiero è stato quello di controllare semplicemente il classe ‘attivo’, ma questo dovrebbe creare una condizione di competizione (risultato dipende dal fatto che Twitter Bootstrap evento o il proprio evento onclick è gestita in prima).

InformationsquelleAutor Daniel O | 2012-02-13



9 Replies
  1. 70

    Questo è davvero fastidioso. Quello che ho trovato è questo:

    Prima di tutto, creare un gruppo di pulsanti semplici, senza data-toggle attributo.

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

    Prossimo, scrivi un gestore di eventi che simula il pulsante di effetto da ‘attivare’ il cliccato uno e ‘disattivazione’ tutti gli altri pulsanti. (EDIT: Integrato Nick‘s cleaner versione dai commenti.)

    $('#selector button').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    
        //TODO: insert whatever you want to do with $(this) here
    });
    • Leggermente conciso e ottimizzato (doppia chiamata a selector) versione: $(this).addClass (“attivo”).fratelli e sorelle().removeClass(‘active’);
    • questo non funziona con i radio button. come specificare che uno è che se ogni pulsante di opzione fa una cosa diversa
    • Io non sono sicuro di aver capito il tuo problema. Se si inserisce il codice dove ho messo il // TODO, si dovrebbe essere in grado di accedere al fresco pulsante di opzione selezionato come $(this).
    • Mi piace molto la tua soluzione, così ho deciso di integrare la risposta, per dare un po ‘ più di spotlight. Spero non ti dispiaccia!
    • Miglioramento: è meglio usare evento mousedown, perché i colori dei pulsanti di modifica su mousedown (incompleto clic).
    • Nella maggior parte dei casi nessuno farà un incompleto fare clic sul pulsante (come premendo il mouse e spostando il cursore di distanza, mentre ancora in mano), ma se qualcuno fa, apparirà hanno due pulsanti selezionati
    • Non c’è davvero alcun bisogno di modificare l’impostazione predefinita di bootstrap gestione di classi css, prova questa soluzione, invece: stackoverflow.com/a/28603203/729324
    • Davvero fastidioso problema e questa soluzione mi ha aiutato. Utilizzando Angolare 5 e Bootstrap pulsante. Penso di avere un evento click e data-toggle nella stessa input è stato il problema. Rimozione di data-toggle risolto il problema. Grazie mille!

  2. 65

    Vedo un sacco di complicato risposte, mentre questo è super semplice nel Bootstrap 3:

    Passo 1: Utilizzare l’ufficiale un codice di esempio per creare il tuo gruppo di pulsanti, e dare al contenitore 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>

    Passaggio 2: Utilizzare questo jQuery gestore:

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

    Provare il violino demo

    • Questa è la soluzione migliore sono d’accordo.
    • questo non funziona
    • Ho aggiunto un violino, si prega di elaborare perché non funziona per voi.
    • Sono imbattuto in questo, mentre sta cercando la soluzione, in questo esempio, il tuo violino look per il bagaglio in condizione di mettere console.log($(this).is(':checked')); in funzione e vedere i risultati. Ora, fare clic sul pre selezionato il check – restituisce false ogni volta. Ora spunta un altro pulsante – oh, guarda, è vero, ora fare clic di nuovo lo stesso tasto back per falso. Quindi, non è davvero la soluzione ideale.
    • Sul mio ultimo Chrome, questo funziona bene. Ecco una versione aggiornata violino che ho usato per test di questo tipo: jsfiddle.net/9k8oc5pf/109. In quali browser non funziona?
    • Il problema che hai notato è risolto un paio di anni fa, github.com/twbs/bootstrap/pull/11376 (il violino è ancora utilizzando 3.0.0, sorry)

  3. 20

    Vorrei utilizzare un evento di modifica non fare clic su di simile a questo:

    $('input[name="name-of-radio-group"]').change( function() {
      alert($(this).val())
    })
    • Pensato di che ma secondo w3schools (w3schools.com/jsref/event_onchange.asp) l’evento onchange è innescata da <input>, <select>, <textarea>. E <input type=”button”> è diverso da Cinguetta consigliato <pulsante>.
    • Questo funziona solo con Chrome, Firefox e altri browser non innescare il cambiamento evento a causa del modo in Bootrap (almeno 3.0) funziona.
    • Sulle ultime docs (3.0) Bootstrap sembra consigliamo di utilizzare input type=”checkbox” raggruppati pulsanti: getbootstrap.com/javascript/#buttons-examples
    • questo non funziona
  4. 9

    Per Bootstrap 3 predefinito radio/pulsante-la struttura del gruppo è :

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

    E si può selezionare attiva come questo:

    $('.btn-primary').on('click', function(){
        alert($(this).find('input').attr('id'));
    }); 
    • Perché utilizzare il id campo per un valore di ingresso, quando si ha un value attributo?
  5. 6

    Non utilizzare dati-attiva /disattiva l’attributo in modo che è possibile controllare l’interruttore comportamento da te. Così sarà anche evitare di gara-condizione

    miei codici:

    pulsante modello di gruppo (scritto .erb, embedded ruby, ruby on rails):

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

    e javascript:

    onChangeFeatures = function(e){
            var el=e.target;
            $(el).button('toggle');
    
            var features=el.parentElement;
            var activeFeatures=$(features).find(".active");
            console.log(activeFeatures);
    }

    onChangeFeatures funzione verrà attivata una volta che il pulsante viene cliccato.

    • Questo mi ha aiutato… io ho avuto un problema per cui il mio fare clic su gestore di andare fuori prima di bootstrap biblioteca cambiato lo stato di commutazione del mio pulsante, quindi il mio codice sempre pensato che il pulsante è stato attivato. Sicuramente meglio gestire la commutazione da soli in situazioni più complesse.
    • Tecnicamente, non c’è race condition in questo scenario.
  6. 3

    Che ho bisogno di fare la stessa cosa per un grafico, dove è possibile selezionare il periodo di dati che devono essere visualizzati.

    Quindi ho introdotto la classe CSS ‘btn-group-radio’ e usato il seguente unobtrusive javascript one-liner:

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

    E qui è il codice 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. 1

    Guardando l’HTML di esempio per i pulsanti di opzione su Twitter Bootstrap pagina (http://twitter.github.com/bootstrap/base-css.html#forms), si può vedere che ogni ingresso ha un attributo ID univoco, cioè optionsRadios1 e optionsRadios2.

    Rilevante esempio di HTML snippet è incluso qui per completezza:

    <div class="controlli"> 
    <label class="radio"> 
    <input type="radio" checked="" value="val1" id="optionsRadios1" name="optionsRadios"> 
    Opzione uno è questo e che—essere sicuri di includere il motivo per cui è grande 
    </label> 
    <label class="radio"> 
    <input type="radio" value="opzione2" id="optionsRadios2" name="optionsRadios"> 
    Opzione due è un'altra cosa e la selezione sarà deselezionare l'opzione uno 
    </label> 
    </div> 
    

    Modo è possibile utilizzare jQuery evento click, e quindi utilizzare il this di riferimento per guardare l’id dell’elemento HTML che è stato cliccato.

    $('.controlli').find('input').bind('click',function(event){ 
    if($(this).attr('id')==='optionsRadios1'){ 
    alert($(this).attr('id')); 
    } else { 
    //... chiamare qualche altra funzione 
    } 
    }); 
    
  8. 1

    Ho cercato tante pagine: ho trovato una bella soluzione. Check it out:

    git link

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

    Se il codice html è simile, per esempio, in modo che l’evento click viene prodotto oltre il marchio, non in ingresso, così ho utilizzato il seguente codice:
    Html esempio:

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

    Codice Javascript per l’evento:

    $('#option1').parent().on("click", function () {
       alert("click fired"); 
    });
    • Grazie per la pubblicazione di una risposta a questa domanda! Codice-solo risposte sono scoraggiati su Stack Overflow, perché un codice di dump senza un contesto, però, non spiega come e perché la soluzione funziona, rendendo difficile per il poster originale (o di eventuali futuri lettori) per capire la logica dietro di esso. Si prega di modificare la tua domanda e includere una spiegazione del tuo codice in modo che altri possano trarre vantaggio dalla tua risposta.

Lascia un commento