Sterowanie przyciskami grupy Bootstrap Przycisk Przyciski/pola wyboru

Question

Próbuję użyć Twitter Bootstrap button group jako rzeczywistego zestawu elementów sterujących wprowadzaniem formularza. Domyślnie te grupy przycisków można ustawić tak, aby działały jak przycisk opcji lub grupa pól wyboru, ale ponieważ używają elementu <button>, nie mogą być używane tak jak przycisk radiowy lub pole wyboru.

W moich badaniach znalazłem this site, który używa CSS, aby te przyciski ładowania faktycznie kontrolowały przyciski i pola wyboru. Jedynym problemem jest to, że używają raczej najnowszych funkcji CSS, i dlatego wymagają IE9 lub wyższej do pracy.

Chciałbym przedłużyć wsparcie dla IE8. Czy istnieje inne (być może kontrolowane przez JS) rozwiązanie, które oferowałoby te same funkcje, co powyższy link, bez stromych wymagań CSS?

Dziękuję za poświęcony czas.

Answer 1

Bootstrap 3 ma rozwiązanie „native” ...

Tam teraz jest „true” Bootstrap rozwiązanie tego problemu, który wydaje się działać prawidłowo także na starszych przeglądarek . Oto jak to wygląda:

// get selection 
 
$('.colors input[type=radio]').on('change', function() { 
 
    console.log(this.value); 
 
});

<!-- Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="btn-group colors" data-toggle="buttons"> 
 
    <label class="btn btn-primary active"> 
 
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow 
 
    </label> 
 
</div> 
 

 
<!-- jQuery and Bootstrap JS --> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Zobacz the relevant Bootstrap documentation aby uzyskać więcej informacji.

Answer 2

Możesz użyć ukrytych elementów formularza i javascript, aby użyć stanu przycisku do wyzwalania stanów elementów formularza.

Answer 3

Bootstrap 2

Spróbuj this fiddle

HTML:

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn btn-primary">Left</button> 
    <button type="button" class="btn btn-primary">Middle</button> 
    <button type="button" class="btn btn-primary">Right</button> 
</div> 
<input type="hidden" id="buttonvalue"/> 

Scenariusz:

$(".btn-group button").click(function() { 
    $("#buttonvalue").val($(this).text()); 
}); 

następnie dostać buttonvalue server side

Answer 4

Z Bootstrap 3.2 umieścić ukryte wejście w środku pojemnika grupy przycisków. Zamiast treści tekstowej przyjmujemy wartość pola th-value-value.

<div id="test" class="btn-group checkit" data-toggle="buttons-radio"> 
    <button type="button" data-value="1" class="btn btn-default active">Yes</button> 
    <input type='hidden' name="testfield" value='1'> 
    <button type="button" data-value="0" class="btn btn-default ">No</button> 
</div> 

Teraz włóż trochę fragment kodu JavaScript do strony onload swojego szablonu.

$('.checkit .btn').click(function() { 
    $(this).parent().find('input').val($(this).data("value")); 
}); 

Musisz tylko dodać .checkit do grupy przycisków i wstawić ukryte pole wprowadzania.

Z bootstrapem 3.2 można używać grup przycisków bezpośrednio z radio- lub checkbox-wejść

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option1" value="1" /> Yes 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option2" value="0" /> No 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="options" id="option3" value="42" /> Whatever 
    </label> 
</div> 

Zobacz tutaj: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

Answer 5

CSS-tylko rozwiązanie:

HTML:

<div class="btn-group"> 
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label> 
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label> 
</div> 

SCSS/LESS:

label.btn { 
    margin-bottom: 0; 
    padding: 0; 
    overflow: hidden; 

    span { 
     display: block; 
     padding: 10px 15px; 
    } 

    input[type=checkbox] { 
     display: none; 
    } 

    input:checked + span { 
     display: block; 
     color: #fff; 
     background-color: #285e8e; 
    } 
    } 

JSfiddle here