Question

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

＆＃13;

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

＆＃13;

但是，如果我删除了boostrap.js脚本（或class="btn btn-primary"），它可以正常工作：

＆＃13;

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

＆＃13;

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

Answer 1

为输入添加自定义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/

Answer 2

只需使用onchange即可。复选框onchange应该比onclick更有意义。

＆＃13;

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

＆＃13;

引导程序标签中的复选框无法正常工作

2 个答案: