Uzyskaj wartość przycisku radiowego twitter bootstrap. JQuery

Question

Używam przycisku radiowego z twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#buttons.

w moim html wygląda następująco:

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

Chciałbym wiedzieć, jak uzyskać wartość przycisku użytkownik sprawdził dzięki jQuery lub JavaScript.

Widziałem kilka pytań na ten temat, ale myślę, że jest inaczej z tym rodzajem przycisku, ponieważ wygląda na to, że nie akceptują "sprawdzonego" atrybutu.

Każda pomoc będzie bardzo mile widziane

PS: jeśli ktoś wie jak sprawdzić domyślnie jednego przycisku, to również pomóc mi wiele. Dziękuję Ci.

Answer 1

jako znacznik mówi, że to button, na które należy zrobić, co sugeruje, i pracować z tymi przyciskami ... Oto prosty przykład:

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

teraz w jQuery:

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

po przesłaniu, znajdziesz wartość w ukrytym polu alignment.

Oto prosty przykład: http://jsbin.com/oveniw/1/

---

dobrą rzeczą, aby wziąć uwagę to, że po kliknięciu zmienia element i bootstrap dołącza nazwę active klasę do klikniętego przycisku.

Zawsze możesz użyć tego do zmiany hidden field, ale nadal będę robić mój przykład, jeśli chcę złożyć formularz sam.

Answer 2

można uzyskać wybrany następująco:

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

Aby ustawić przycisk aktywny

$(selector).addClass('active') 

Na przykład, jeśli chcesz ustawić pierwszy przycisk aktywny

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

Answer 3

Możesz "sprawdzić" przycisk ustawiając jego klasę na'active':

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

Aby uzyskać wartość, trzeba mieć dane „wartość”, takie jak:

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

W ten sposób można uzyskać wartość poprzez:

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

Należy jednak pamiętać, że wartość nie zostanie opublikowana w formularzu, chyba że masz <input type=hidden>, aby rzeczywiście przechowywać wybrane dane.

Answer 4

Nie ma powodu, aby to skomplikować.

Say masz grupę przycisków, do wyboru, czy coś jest aktywne lub nieaktywne ... jak tak ...

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

Po uruchomieniu funkcji lub cokolwiek zebrać wybrany przycisk, by uruchomić to polecenie ... które przyniosłoby ci wartość wybranego przez Ciebie przycisku opcji. Po kliknięciu przycisku lub bardziej do punktu, gdy jest on "sprawdzony", otrzymuje klasę "aktywną", podobnie jak w poprzednich odpowiedziach. To wszystko, czego naprawdę potrzebujesz szukać. Z tym małym urywkiem poniżej.

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

Zasadniczo jest za pomocą selektora wieloznaczny szuka tego „productStatus” klasy przycisk, a następnie powrocie wartość przycisku, który ma „aktywny” klasy.

Answer 5

Używam tego haczyka, gdy liczba Bootstrap przycisków radiowych więcej niż jeden

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

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

można sprawdzić wartość przycisku radiowego na złożenie formularza w sposób funkcja lub dowolne zdarzenie kliknięcia przycisku przesyłania

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