Question

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

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

我正在尝试在我的代码中使用它...但是活动不会切换问题...

我的cdns

在这里输入代码

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

Answer 1

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

Answer 2

我认为你有jquery的问题。

请参阅此处的示例http://jsfiddle.net/iklementiev/rt95u7xL/2/

我包含jquery 1.11.0

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo by iklementiev</title>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>        
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style type="text/css">        
      </style>
      <script type="text/javascript">
         $(window).load(function(){
         $(document).ready(function() {
             $('.btn').button('toggle')
         });
         });         
      </script>
   </head>
   <body>
      <div class="btn-group" data-toggle="buttons">
         <label class="btn btn-primary">
         <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 active">
         <input type="radio" name="options" id="optionsa" value="c"> Option 3
         </label>
      </div>
   </body>
</html>

Answer 3

您正在切换所有按钮，因此最后一个按钮会被激活...

它正在工作，没有toggle param。请参阅：http://jsfiddle.net/g2L8ujt7/1/

如果您尝试以编程方式激活第二个单选按钮，则可以执行以下操作：

...
<label class="btn btn-primary tgl">
     <input type="radio" name="options" id="options" value="b"> Option 2
</label>
...

请参阅我给第二个单选按钮tgl课程（唯一，区别于其他人）

所以现在你只能切换这个：

$('.tgl').button('toggle');

最后一个例子：http://jsfiddle.net/g2L8ujt7/2/

PS 如果你想选择多个，你必须使用复选框按钮而不是收音机，只是说区别：复选框意味着你想要的选择多，而收音机很好，可以从中选择许多

如何在我们的JavaScript中触发Bootstrap

3 个答案: