我无法让jQuery与Bootstrap按钮一起使用

Question

Put simply: my goal is to have two buttons on a page, so that "1" is displayed when the first is pressed, and "2" is displayed when the second is pressed. This works with radio input, but when I add a button label from Twitter Bootstrap, it no longer works.

First, here is the jquery I am using. I am trying to change the value of the span to the value of the button pressed:

  <span id="val">0</span>

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
  $(function() {
      $('input[type=radio]').click(function() {
        $("#val").html($(this).val());
      });
  });

  </script>

It works fine with this:

<input type="radio" Id="Radio1" value="1" name="a">
<input type="radio" Id="Radio2" value="2"  name="a">

But when I do this, it no longer works (I can see and press the buttons, but the value of span remains at 0):

<div class="btn-group" data-toggle="buttons">
    <label type="button" for="Radio1" class="btn btn-primary active">
     <input type="radio" Id="Radio1" value="1" checked>
    </label>
    <label type="button" for="Radio2" class="btn btn-primary">
     <input type="radio" Id="Radio2" value="2">
    </label>
</div>

It seems to me like the label tags are causing a problem, but I am unsure why. Removing the labels makes it work, but I need the button labels.

Answer 1

Place the click event on labels, then find the value on its "input" children:

$(function() {
  $('div.btn-group label').click(function() {
    $("#val").html($(this).children('input').val());
  });
});

JsFiddle: https://jsfiddle.net/5vh3yzzq/1/