bootstrap-button-group

bootstrap-button-group.html

<section>
  <div id="sex-btns" class="btn-group" data-toggle="buttons-checkbox">
    <button id="male" value="male" class="btn">男</button>
    <button id="female" value="female" class="btn">女</button>
    <button id="unknown" value="unknown" class="btn">不明</button>
  </div>

  <form action="javascript:alert($('#sex').val());">
    <input id="sex" type="hidden" name="sex" value="">
    <input type="submit">
  </form>
</section>

bootstrap-button-group.js

$(function(){
  (function () {
    var str = '["male", "female"]';
    var id, idx, btns = eval(str);
    $.each(btns,function(idx, id) {
      $('#' + id).button('toggle');
    });

    var getActiveBtnIds = function(id) {
      var btn, vals = [];
      $(id).children().each(function(idx, el) {
        btn = $(el);
        if (btn.hasClass('active')) {
          vals.push('"' + btn.attr('id') + '"');
        }
      });

      return vals;
    };

    $('form').submit(function() {
      $('#sex').val('[' + getActiveBtnIds('#sex-btns').join(', ') + ']');
      return true;
    });

  }());
});