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

Question

简单地说:我的目标是在一个页面上有两个按钮，以便在按下第一个按钮时显示“1”，在按下第二个按钮时显示“2”。这适用于 radio 输入，但当我从 Twitter Bootstrap 添加按钮标签时，它不再起作用。

首先，这是我正在使用的jquery。我正在尝试将跨度的值更改为按下的按钮的值:

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

它可以正常工作:

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

但是当我这样做时，它不再起作用(我可以看到并按下按钮，但跨度的值仍为 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>

在我看来，标签引起了问题，但我不确定为什么。删除标签使其可以工作，但我需要按钮标签。

Answer 1

将点击事件放在标签上，然后在其“输入”子项上查找值:

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

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