Ottieni il valore di un pulsante radio di bootstrap di Twitter. JQuery

Question

Sto utilizzando il pulsante di opzione da twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#buttons.

Nel mio HTML in assomiglia a questo:

<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn">Middle</button> 
    <button type="button" class="btn">Right</button> 
    </div> 
    <input type="submit" onclick="get_the_value_and_do_something_with_it" 

vorrei sapere come ottenere il valore del pulsante l'utente controllato grazie a jQuery o Javascript.

Ho visto diverse domande su questo argomento, ma penso che sia diverso con questo tipo di pulsante, perché sembra che non accettino un attributo "controllato".

Qualsiasi aiuto sarebbe molto gradito

PS: se qualcuno sa come controllare per default uno dei pulsanti, sarebbe anche mi aiuta molto. Grazie.

Answer 1

come il tag dice che è un button, per questo, si dovrebbe fare quello che ci suggerisce, e lavorare con quei bottoni ... Ecco un semplice esempio:

<input type="hidden" id="alignment" value="" /> 
<div class="btn-group alignment" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn">Middle</button> 
    <button type="button" class="btn">Right</button> 
</div> 

ora il jQuery:

$(".alignment .btn").click(function() { 
    // whenever a button is clicked, set the hidden helper 
    $("#alignment").val($(this).text()); 
}); 

su invio, il valore è nel campo nascosto alignment.

Ecco un esempio di base: http://jsbin.com/oveniw/1/

---

una buona cosa da fare attenzione è che al momento click, i cambiamenti degli elementi e bootstrap accoda un nome di active di classe al pulsante cliccato.

Si può sempre usare questo per cambiare il hidden field, ma continuerei a fare il mio esempio se volessi inviare il modulo stesso.

Answer 2

è possibile ottenere il selezionata come segue:

$('.btn-group button.btn.active') 

Per impostare un pulsante attiva

$(selector).addClass('active') 

Per esempio, se si desidera impostare il primo tasto attiva:

$('.btn-group button.btn:eq(0)').addClass('active') 

Answer 3

Puoi "spuntare" un pulsante impostando la sua classe su "attivo":

<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn active">Middle</button> 
    <button type="button" class="btn">Right</button> 
</div> 

per ottenere un valore, si dovrebbe avere un dato "valore", come ad esempio:

<div class="btn-group" data-toggle="buttons-checkbox" id="my_radiogroup"> 
    <button type="button" class="btn" data-value="0">Left</button> 
    <button type="button" class="btn active" data-value="1">Middle</button> 
    <button type="button" class="btn" data-value="2">Right</button> 
</div> 

In questo modo, è possibile ottenere il valore tramite:

$("#my_radiogroup .active").data("value"); 
>>> 1 
(but may, of course, be undefined if no button is checked) 

Ma tenere a mente che il valore non verrà pubblicato nel modulo, a meno che non si disponga di uno <input type=hidden> per archiviare effettivamente i dati selezionati.

Answer 4

Non c'è motivo di complicarlo.

Diciamo che avete un gruppo di pulsanti, per la selezione se qualcosa è attivo o inattivo ... in questo modo ...

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="productStatus btn btn-success" value="1">Yes</button> 
    <button type="button" class="productStatus btn btn-danger" value="0">No</button> 
</div> 

Quando si esegue una funzione o qualsiasi cosa per raccogliere il pulsante selezionato, si potrebbe correre questo comando ... che ti farà ottenere il valore del tuo pulsante radio selezionato. Quando fai clic su un pulsante, o più al punto, quando è "selezionato", viene data la classe di "attivo" come nelle risposte precedenti. Questo è tutto ciò che devi davvero cercare. Con questo piccolo frammento qui sotto.

var active = $('.productStatus[class*="active"]').val(); 
alert(active); 

Fondamentalmente si sta usando un selettore jolly alla ricerca di questo "productStatus" classe Button, e quindi restituire il valore del pulsante che ha la classe "attiva".

Answer 5

Io uso questo libro quando un certo numero di pulsanti di opzione Bootstrap più di un

$('div[data-toggle="buttons-radio"] .btn').click(function(){ 
    $('input[name="' + $(this).parent().attr('id') + '"]').val($(this).val()); 
}); 

E in HTML:

<div class="btn-group" id="rental" data-toggle="buttons-radio"> 
    <button type="button" class="btn" value="0">Sale</button> 
    <button type="button" class="btn" value="1">Rent</button> 
</div> 

<input type="hidden" name="rental" value="0"> 

Answer 6

È possibile controllare il valore del pulsante di scelta su presentazione di forma in un funzione o qualsiasi evento click del pulsante di invio

alert($('.btn-group > .btn.active').attr("value"));