引导标签中的复选框不起作用答案

【问题标题】：Checkbox in bootstrap label not working引导标签中的复选框不起作用
【发布时间】：2017-09-09 14:02:15
【问题描述】：

我试图按照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 脚本的情况下使其正常工作？

【问题讨论】：

我建议不要通过 onchange/onclick 浏览器调用而是通过 JS 绑定该按钮，您可以通过该按钮上的类/ID 使用定位吗？
我明白了.. 酷！

标签： javascript html twitter-bootstrap checkbox labels

【解决方案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>

【讨论】：

@ZwoRmi ：您使用的是val()，但您需要使用($(this).is(":checked"));。查看更新的答案！

【解决方案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/

【讨论】：

谢谢@Lalji，为什么需要clip: initial？