Как превратить группу кнопок в Bootstrap в вход в стиле радио в мою форму?

У меня есть следующий HTML-код, который создает группу переключателей, используя 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>

Основываясь на выборе пользователя, я хочу отправить переменную в форме из группы радиостанций с названием "рейтинг" со значением, назначенным для любого значения выбранной кнопки. Как это сделать в jQuery?

ОТВЕТЫ

Ответ 1

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

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

  • введите значение
  • button элементы
  • с атрибутом name, который имеет значение рейтинг (группа)
  • и класс CSS active (с указанием его выбора)

Изменить на основе нового вопроса OP в комментариях:

Чтобы захватить ввод с помощью кнопки, вам понадобятся пользовательские обработчики script. Если ваша цель состоит в том, чтобы действительно представить это с помощью формы, я бы на самом деле предложил против нее. В основном потому, что это не то, что пользователь ожидает в форме. Просто используйте обычный переключатель.

Однако, если вы хотите использовать это, вы можете сделать следующее:

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

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

Вот пример с регулярным input по сравнению с button и почему вы не должны использовать кнопку в форме: http://jsfiddle.net/TxgVe/1/ p >

Ответ 2

Вот мое решение: http://jsfiddle.net/tFYV9/1/

EDIT (код из 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);
  }
}

Ответ 3

Попробуйте это. Это сработало для меня. У меня огромная форма работала несколько раз.

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

Ответ 4

Хорошие новости!

В Bootstrap 3 теперь используются группы кнопок input type="radio"!

Если вы не хотите обновлять, см. мой ответ ниже:

Я использую следующий jQuery:

$('[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
});

Для этого все, что вам нужно сделать, это обеспечить, чтобы каждый button имел value и имел input (я предпочитаю использовать type="hidden", но type="text" хорош для тестирования) после btn-group div.

Я заметил, что если вы отправите форму, а затем нажмите кнопку "Назад", все данные формы будут по-прежнему присутствовать, включая скрытые входы, но кнопки не будут активны. Чтобы исправить это, добавьте этот дополнительный jQuery:

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

Ответ 5

Вы можете использовать мой плагин bootstrap-form-buttonset для скинов или флажков для групп кнопок загрузки. Он совместим с Bootstrap 2 и Bootstrap 3.

Просто напишите простые старые радиовходы, оберните их и вызовите $('.my-wrapper').bsFormButtonset('attach'). Вот оно.