Nút Khởi động Twitter Nút Nhóm Radio Control/Hộp kiểm tra

Question

Tôi đang cố sử dụng Twitter Bootstrap button group làm bộ điều khiển nhập biểu mẫu thực tế. Theo mặc định, các nhóm nút này có thể được thực hiện để hoạt động giống như nút radio hoặc nhóm hộp kiểm, nhưng vì chúng sử dụng phần tử <button>, chúng thực sự không thể được sử dụng như nút radio hoặc hộp kiểm.

Trong nghiên cứu của mình, tôi đã tìm thấy this site sử dụng CSS để làm cho các nút khởi động này thực sự kiểm soát nút radio và hộp kiểm. Vấn đề duy nhất là họ sử dụng các tính năng khá gần đây của CSS để làm việc, và do đó, yêu cầu IE9 hoặc cao hơn để làm việc.

Tôi muốn mở rộng hỗ trợ cho IE8. Có một giải pháp khác (có lẽ JS được kiểm soát) sẽ cung cấp các tính năng tương tự như liên kết ở trên mà không có yêu cầu CSS dốc không?

Cảm ơn bạn đã dành thời gian.

Answer 1

Bootstrap 3 có một "bản địa" giải pháp ...

Có bây giờ là một "true" Bootstrap giải pháp cho vấn đề này, mà dường như làm việc tốt cũng trên các trình duyệt cũ . Đây là những gì nó trông giống như:

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

Xem the relevant Bootstrap documentation để biết thêm thông tin.

Answer 2

Bạn có thể sử dụng các phần tử biểu mẫu ẩn và javascript để sử dụng trạng thái nút để kích hoạt phần tử biểu mẫu nêu rõ.

Answer 3

Bootstrap 2

Hãy thử 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"/> 

Script:

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

.210

sau đó nhận được buttonvalue phía máy chủ

Answer 4

Với Bootstrap 3.2 hãy đặt đầu vào bị ẩn vào giữa vùng chứa nhóm nút của bạn. Thay vì nội dung văn bản, chúng tôi lấy giá trị của trường giá trị dữ liệu thứ.

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

Bây giờ chèn một đoạn mã javascript nhỏ vào phần onload của mẫu của bạn.

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

Vì vậy, bạn chỉ cần thêm .checkit vào nhóm nút và chèn trường nhập ẩn.

Với bootstrap 3.2 bạn có thể sử dụng các nhóm nút trực tiếp với radio hay checkbox-đầu vào

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

Xem ở đây: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

Answer 5

CSS-chỉ giải pháp:

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