Получите значение переключателя бутстрапа twitter. JQuery

Я использую Radio-button из twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#buttons.

В моем html файле выглядит так:

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

Я хотел бы знать, как получить значение кнопки, которую пользователь проверил, благодаря JQuery или Javascript.

Я видел несколько вопросов по этой теме, но я думаю, что это отличается от этой кнопки, потому что похоже, что они не принимают атрибут "checked".

Любая помощь будет очень рада

PS: если кто-то знает, как проверить по умолчанию одну из кнопок, это также очень помогло бы мне. Спасибо.

Ответ 1

поскольку тег говорит, что это button, для этого вы должны делать то, что он предлагает, и работать с этими кнопками... вот простой пример:

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

теперь jQuery:

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

после отправки, вы найдете значение в скрытом поле alignment.

Вот базовый пример: http://jsbin.com/oveniw/1/

следует обратить внимание на то, что при щелчке элемент меняется, и bootstrap добавляет имя класса active к нажатой кнопке.

Вы всегда можете использовать это, чтобы изменить hidden field, но я продолжал бы делать свой пример, если бы захотел представить форму сам.

Ответ 2

Вы можете "проверить" кнопку, установив ее класс в "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>

Чтобы получить значение, вы должны иметь данные "value", например:

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

Таким образом, вы можете получить значение через:

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

Но имейте в виду, что значение не будет размещено в вашей форме, если у вас нет <input type=hidden> для фактического хранения выбранных данных.

Ответ 3

Нет причин для того, чтобы сделать это сложным.

Скажите, что у вас есть группа кнопок, для выбора того, что-то активно или неактивно... вот так...

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

Когда вы запускаете какую-либо функцию или что-либо, чтобы собрать выбранную вами кнопку, вы должны запустить эту команду..., которая даст вам значение выбранного вами переключателя. Когда вы нажимаете на кнопку или больше до точки, когда она "проверяется", ей присваивается класс "активный", как в предыдущих ответах. Это все, что вам действительно нужно искать. С этим небольшим фрагментом ниже.

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

В основном это использует селектор подстановочных знаков для поиска этого класса "productStatus", а затем возвращает значение кнопки с "активным" классом.

Ответ 4

Я использую этот крючок, когда несколько переключателей Bootstrap более одного

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

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

Ответ 5

Вы можете получить выбранное следующим образом:

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

To, установите активную кнопку

$(selector).addClass('active')

Например, если вы хотите, чтобы первая кнопка была активной:

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

Ответ 6

Вы можете проверить значение переключателя при отправке формы в функцию или любое нажатие кнопки отправки

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