Làm cách nào để chuyển một nhóm nút trong Bootstrap thành đầu vào kiểu radio thành biểu mẫu của tôi?

Question

Tôi có HTML sau để tạo nhóm nút radio bằng Bootstrap.

<div class="btn-group" data-toggle="buttons-radio"> 
    <button class="btn" type="button" name="rating" value="1"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="2"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="3"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="4"> 
    <img ...> 
    </button> 
</div> 

<button class="btn" type="submit" name="submit">Submit</button> 

Dựa trên lựa chọn của người dùng, tôi muốn gửi biến trong biểu mẫu được gán cho giá trị của nút đã chọn là. Làm thế nào tôi sẽ làm điều này trong jQuery?

Answer 1

$('button[name="rating"].active').val(); 

Trong tiếng Anh đơn giản rằng lựa chọn đọc như:

• cho tôi giá trị của
• button yếu tố
• lọc theo thuộc tính name mà có một giá trị của giá (nhóm)
• và lớp CSS active (cho biết nó đã được chọn)

Chỉnh sửa dựa trên câu hỏi mới OP trong nhận xét:

Để nắm bắt được thông tin từ các nút, bạn sẽ cần phải sử dụng bộ xử lý kịch bản tùy chỉnh. Nếu mục tiêu của bạn là thực sự gửi biểu mẫu này với biểu mẫu, tôi thực sự sẽ đề xuất chống lại nó. Chủ yếu là vì đây không phải là những gì người dùng mong đợi trong một biểu mẫu. Chỉ cần sử dụng đầu vào nút radio thông thường.

Tuy nhiên nếu bạn muốn sử dụng này, bạn có thể làm như sau:

$('form').submit(function() { 
    var rating = $('button[name="rating"].active').val(); 

    // get the rest of the values 
    // submit the form 
});​ 

Dưới đây là một ví dụ với một thường xuyên input vs các button và tại sao bạn không nên sử dụng các nút trong một hình thức: http://jsfiddle.net/TxgVe/1/

Answer 2

đây là giải pháp của tôi: http://jsfiddle.net/tFYV9/1/

EDIT(Mã số từ jsFiddle)

HTML

<input type="text" id="hidden_ipt" value="0" /> 
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
    <button type="button" class="btn" data-toggle="button" value="female"> 
    female 
    </button> 
    <button type="button" class="btn" data-toggle="button" value="male"> 
    male 
    </button> 
</div>​ 

Javascript

// Bootstrap Hack 
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle; 
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){ 
    _old_toggle.apply(this); 
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]') 
    var target = $parent ? $parent.data('target') : undefined; 
    var value = this.$element.attr('value'); 
    if(target && value){ 
    $('#'+target).val(value); 
    } 
} 

Answer 3

Hãy thử điều này. Nó làm việc cho tôi. Tôi có một hình thức rất lớn làm việc nhiều lần.

<div class="btn-group" data-toggle="buttons-checkbox"> 
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button> 
</div> 
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" /> 

Answer 4

Tin vui!

Bootstrap 3 hiện sử dụng input type="radio" nhóm nút!

Nếu bạn không muốn nâng cấp, tuy nhiên, xem câu trả lời của tôi dưới đây:

---

Tôi đang sử dụng jQuery như sau:

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){ 
    var value = $(this).val(); 
    $(this).parent().next().val(value); 
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation 
}); 

Để làm việc này, tất cả các bạn cần phải làm là đảm bảo mỗi button có một số value và có một số input (Tôi thích sử dụng type="hidden" nhưng type="text" là tốt để thử nghiệm) sau btn-groupdiv.

Tôi nhận thấy rằng nếu bạn gửi biểu mẫu và sau đó nhấn nút quay lại, tất cả dữ liệu biểu mẫu sẽ vẫn có mặt, bao gồm các đầu vào bị ẩn, nhưng các nút sẽ không hoạt động. Để khắc phục điều đó, hãy thêm jQuery bổ sung này:

$('[data-toggle="buttons-radio"]').each(function(){ 
    var that = $(this); 
    var value = that.next().val(); 
    if(value != "") { 
     that.children("button[value="+value+"]").addClass("active"); 
    } 
}); 

Answer 5

Bạn có thể sử dụng plugin của mình bootstrap-form-buttonset cho radio trên da hoặc hộp kiểm cho nhóm nút khởi động. Nó tương thích với Bootstrap 2 và Bootstrap 3.

Chỉ cần viết các đầu vào radio cũ đồng bằng, quấn chúng lại với nhau và gọi $('.my-wrapper').bsFormButtonset('attach'). Thats it.