bootstrap 标签中的复选框不起作用

Question

我试图按照此 tutorial 将复选框显示为我的 angular 应用程序的按钮，但有些东西对我不起作用，复选框值没有改变，并且 onclick函数未被调用：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" onclick="alert('is not shown')"> Click me <!-- Here -->
        </label>
    </div>
</body>
</html>

但是，如果我删除 boostrap.js 脚本（或 class="btn btn-primary"），它会起作用：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" onclick="alert('is shown !')"> Click me 
        </label>
    </div>
</body>
</html>

如何在不删除 bootstrap.js 脚本的情况下使其正常工作？

Answer 1

只需使用onchange。复选框 onchange 应该比 onclick.

更有意义

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="checkbox" onchange="alert($(this).is(':checked'))">Click me
    </label>
  </div>
</body>

</html>

Answer 2

为输入添加自定义 css

.btn-group input[type=checkbox]{
    clip: initial !important;
    cursor: pointer;
    height: 29px;
    left: 0;
    opacity: 0;
    pointer-events: initial !important;
    top: 0;
    width: 100%;
}

https://jsfiddle.net/xt3b88z2/

bootstrap 标签中的复选框不起作用

Checkbox in bootstrap label not working

html

javascript

checkbox

labels

twitter-bootstrap