get button js working with actual form elements p cooll

docs/assets/css/bootstrap.css

@@ -3269,8 +3269,8 @@ button.close {
   width: 1%;
 }
 
-.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
-.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
+.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
+.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }
 

docs/assets/js/bootstrap.js

@@ -196,10 +196,11 @@
   }
 
   Button.prototype.toggle = function () {
-    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
+    var $parent = this.$element.closest('[data-toggle="buttons"]')
 
-    if ($parent) {
-      $parent.find('.active').removeClass('active')
+    if ($parent.length) {
+      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
     }
 
     this.$element.toggleClass('active')
@@ -241,6 +242,7 @@
 
   $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
     var $btn = $(e.target)
+    if ($btn.has('input').length) return // throw away double event for inputs
     if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
     $btn.button('toggle')
   })
@@ -608,17 +610,18 @@
     var target  = $this.attr('data-target')
         || e.preventDefault()
         || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
-    var data   = $(target).data('bs.collapse')
+    var $target = $(target)
+    var data    = $target.data('bs.collapse')
     var option  = data ? 'toggle' : $this.data()
     var parent  = $this.attr('data-parent')
     var $parent = parent && $(parent)
 
     if (!data || !data.transitioning) {
       if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
-      $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
+      $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
     }
 
-    $(target).collapse(option)
+    $target.collapse(option)
   })
 
 }(window.jQuery);

docs/javascript.html

@@ -1168,9 +1168,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
 {% endhighlight %}
 
             <h4>Checkbox</h4>
-            <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
+            <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
             <div class="bs-example" style="padding-bottom: 24px;">
-              <div class="btn-group" data-toggle="buttons-checkbox">
+              <div class="btn-group" data-toggle="buttons">
                 <label class="btn btn-primary">
                   <input type="checkbox"> Option 1
                 </label>
@@ -1183,7 +1183,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
               </div>
             </div><!-- /example -->
 {% highlight html %}
-<div class="btn-group" data-toggle="buttons-checkbox">
+<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
     <input type="checkbox"> Option 1
   </label>
@@ -1197,9 +1197,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
 {% endhighlight %}
 
             <h4>Radio</h4>
-            <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
+            <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
             <div class="bs-example" style="padding-bottom: 24px;">
-              <div class="btn-group" data-toggle="buttons-radio">
+              <div class="btn-group" data-toggle="buttons">
                 <label class="btn btn-primary">
                   <input type="radio" name="options" id="option1"> Option 1
                 </label>
@@ -1212,7 +1212,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
               </div>
             </div><!-- /example -->
 {% highlight html %}
-<div class="btn-group" data-toggle="buttons-radio">
+<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
     <input type="radio" name="options" id="option1"> Option 1
   </label>

js/button.js

@@ -53,10 +53,11 @@
   }
 
   Button.prototype.toggle = function () {
-    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
+    var $parent = this.$element.closest('[data-toggle="buttons"]')
 
-    if ($parent) {
-      $parent.find('.active').removeClass('active')
+    if ($parent.length) {
+      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
     }
 
     this.$element.toggleClass('active')
@@ -98,6 +99,7 @@
 
   $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
     var $btn = $(e.target)
+    if ($btn.has('input').length) return // throw away double event for inputs
     if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
     $btn.button('toggle')
   })

js/tests/unit/button.js

@@ -69,7 +69,7 @@ $(function () {
       })
 
       test("should toggle active when btn children are clicked within btn-group", function () {
-        var btngroup = $('<div class="btn-group" data-toggle="buttons-checkbox"></div>')
+        var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
           , btn = $('<button class="btn">fat</button>')
           , inner = $('<i></i>')
         btngroup
@@ -81,22 +81,35 @@ $(function () {
       })
 
       test("should check for closest matching toggle", function () {
-        var group = $("<div data-toggle='buttons-radio'></div>")
-          , btn1  = $("<button class='btn active'></button>")
-          , btn2  = $("<button class='btn'></button>")
-          , wrap  = $("<div></div>")
+        var group = '<div class="btn-group" data-toggle="buttons"> \
+          <label class="btn btn-primary active"> \
+            <input type="radio" name="options" id="option1" checked="true"> Option 1 \
+          </label> \
+          <label class="btn btn-primary"> \
+            <input type="radio" name="options" id="option2"> Option 2 \
+          </label> \
+          <label class="btn btn-primary"> \
+            <input type="radio" name="options" id="option3"> Option 3 \
+          </label> \
+        </div>'
 
-        wrap.append(btn1, btn2)
+        var group = $(group)
 
-        group
-          .append(wrap)
-          .appendTo($('#qunit-fixture'))
+        var btn1 = $(group.children()[0])
+        var btn2 = $(group.children()[1])
+        var btn3 = $(group.children()[2])
+
+        group.appendTo($('#qunit-fixture'))
 
         ok(btn1.hasClass('active'), 'btn1 has active class')
+        ok(btn1.find('input').prop('checked'), 'btn1 is checked')
         ok(!btn2.hasClass('active'), 'btn2 does not have active class')
-        btn2.click()
+        ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
+        btn2.find('input').click()
         ok(!btn1.hasClass('active'), 'btn1 does not have active class')
+        ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
         ok(btn2.hasClass('active'), 'btn2 has active class')
+        ok(btn2.find('input').prop('checked'), 'btn2 is checked')
       })
 
 })

less/button-groups.less

@@ -164,7 +164,7 @@
 
 
 // Checkbox and radio options
-.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
-.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
+.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
+.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }