javascript - 如何在我们的JavaScript中触发Bootstrap

http://getbootstrap.com/javascript/#buttons？

在这里，他们给了一个演示在bootsrtap中切换单选按钮的演示。

我正在尝试在我的代码中使用它...但是活动人员未切换问题所在...

我的CDN

在此处输入代码

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

我的剧本

$(document).ready(function() {
    $('.btn').button('toggle')
});

我的代码

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

最佳答案

您的JavaScript包含的顺序错误。

Bootstrap对jQuery有依赖性。确保先定义。

示例：http://jsbin.com/citizeqecupi/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script>
    $(document).ready(function() {
      $('.btn').button()
    });

  </script>

</head>
<body>

  <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

</body>
</html>