2012-11-12 43 views
12

Tôi đang sử dụng nút Radio từ nút khởi động twitter: http://twitter.github.com/bootstrap/javascript.html#buttons.Nhận giá trị của nút radio khởi động twitter. JQuery

Trong html của tôi trong vẻ bề ngoài như thế này:

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

Tôi muốn biết làm thế nào để có được những giá trị của nút người sử dụng kiểm tra nhờ Jquery hoặc Javascript.

Tôi đã thấy một số câu hỏi về chủ đề này, nhưng tôi nghĩ nó khác với loại nút này, vì có vẻ như họ không chấp nhận thuộc tính "đã kiểm tra".

Bất kỳ trợ giúp sẽ là rất đáng hoan nghênh

PS: nếu ai đó biết làm thế nào để kiểm tra theo mặc định một trong những nút, nó cũng sẽ giúp tôi rất nhiều. Cảm ơn bạn.

Trả lời

24

như thẻ nói đó là một button, cho rằng, bạn nên làm những gì nó thấy, và làm việc với những nút ... đây là một ví dụ đơn giản:

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

nay là jQuery:

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

khi gửi, bạn sẽ tìm thấy giá trị trong trường bị ẩn alignment.

Dưới đây là một ví dụ cơ bản: http://jsbin.com/oveniw/1/


một điều tốt để có sự chú ý là sau khi nhấp chuột, những thay đổi phần tử và bootstrap gắn thêm một cái tên active lớp nút bấm.

Bạn luôn có thể sử dụng tùy chọn này để thay đổi hidden field, nhưng tôi sẽ tiếp tục làm ví dụ của mình nếu tôi muốn tự gửi biểu mẫu đó.

+2

Cảm ơn bạn rất nhiều! Bây giờ, những gì tôi không làm là sử dụng nó trong một chức năng bài viết. Tôi đoán tôi có thể làm: $ (". Alignment .btn"). Click (function() { data = ($ (this) .text()); $ .post ('/ url /', {'data –

+0

bạn chỉ đơn giản là có thể gửi các hình thức (phù thủy có lẽ là đơn giản), 'lĩnh vực ẩn' sẽ có giá trị bạn cần ... như tôi đang ở. NET, một' Yêu cầu ["căn chỉnh"] 'sẽ có nút được nhấn nếu bạn chỉ cần gửi dưới dạng' 'hoặc thậm chí' $ ("form"). Submit(); ' – balexandre

+0

Tôi đã thử nhưng tôi không tìm cách làm những gì tôi muốn làm. Tôi đã đăng câu hỏi chi tiết hơn về vấn đề của mình (http://stackoverflow.com/questions/13351586/jquery-post-function-with-radio -Button-django) Và cảm ơn bạn một lần nữa vì sự giúp đỡ của bạn –

0

Bạn có thể nhận các lựa chọn như sau:

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

Tổ, thiết lập một nút hoạt động

$(selector).addClass('active') 

Ví dụ, nếu bạn muốn thiết lập các nút đầu tiên hoạt động:

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

Bạn có thể "kiểm tra" một nút bằng cách đặt lớp của nó thành 'không hoạt động':

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

Để có được một giá trị, bạn nên có một "giá trị" dữ liệu, chẳng hạn như:

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

Bằng cách này, bạn có thể nhận được giá trị thông qua:

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

Nhưng hãy nhớ rằng giá trị sẽ không được đăng trong biểu mẫu của bạn, trừ khi bạn có <input type=hidden> để lưu trữ dữ liệu đã chọn.

5

Không có lý do gì để làm điều này phức tạp.

Giả sử bạn có một nhóm nút, để lựa chọn cho dù một cái gì đó đang hoạt động hoặc không hoạt động ... như vậy ...

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

Khi bạn chạy một hàm hoặc bất cứ điều gì để thu thập nút bạn chọn, bạn sẽ chạy lệnh này ... sẽ giúp bạn có được giá trị của nút radio đã chọn của bạn. Khi bạn bấm vào một nút, hoặc nhiều hơn đến điểm, khi nó được "kiểm tra", nó được đưa ra lớp "hoạt động" như trong câu trả lời trước đó. Đó là tất cả những gì bạn thực sự cần tìm. Với đoạn mã nhỏ bên dưới.

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

Về cơ bản, nó sử dụng bộ chọn ký tự đại diện để tìm lớp nút "productStatus" này, sau đó trả về giá trị của nút có lớp "đang hoạt động".

+3

tôi nghĩ rằng bằng cách sử dụng '' '$ ('. productStatus.active')' '' sẽ là rất nhiều neater. – kritzikratzi

2

tôi sử dụng hook này khi một số nút radio Bootstrap nhiều hơn một

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

Và trong 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"> 
0

Bạn có thể kiểm tra giá trị của nút radio trên nộp hình thức trong một chức năng hoặc bất kỳ sự kiện nhấp chuột nào của nút gửi

alert($('.btn-group > .btn.active').attr("value")); 
Các vấn đề liên quan