我无法让jQuery与Bootstrap按钮一起工作

I can't get jQuery to work with Bootstrap buttons

本文关键字：Bootstrap 按钮 一起 工作 jQuery      更新时间：2023-09-26

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

首先，这是我使用的jquery。我试图将span的值更改为按下的按钮的值:

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

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

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

将click事件放置在标签上，然后在其"input"子元素中查找值:

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

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

相关文章：