AngularJS Bootstrap 复选框不检查点击答案

【问题标题】：AngularJS Bootstrap checkbox not checking on clickAngularJS Bootstrap 复选框不检查点击
【发布时间】：2021-06-25 13:37:17
【问题描述】：

我在 AngularJS/Bootstrap 应用程序中使用了一个复选框，我面临的问题是，当我在未选中的情况下单击它时，它没有显示复选标记。虽然正在调用 toggleVal() 方法并且它正在执行这些步骤，但它没有显示复选标记。另外，我的作用域变量 myvar 是 0 或 1，我想相应地显示它。

<a href class="list-group-item list-group-item-action flex-column align-items-start">
 <div class="d-flex w-100 justify-content-between mt-2">
  <input ng-click="toggleVal()" class="form-check-input ml-2" type="checkbox"  
  ng-model="myvar"
  ng-checked="myvar"
  ng-true-value="1" ng-false-value="0">
 </div>
</a>

-- 更新：所以我添加了一些额外的细节，包括更新的代码。该复选框位于可能会影响选择的引导列表组项内。

【问题讨论】：

我模拟了你的sn-p，一切正常。你能把你的代码放在stackblitz上吗
我在原始代码/问题中添加了更多细节。也许这是在 Bootstrap 列表组中的事实以某种方式影响了这一点？
什么是bootstrap版本？
这是在 Bootstrap 4 中。

标签： html angularjs twitter-bootstrap input checkbox

【解决方案1】：

问题是anchor tag。当您单击复选框时，实际上您也单击了锚标记。所以这意味着您的复选框在每次点击中点击了两次。

要解决此问题，只需将href="Javascript:void(0);" 添加到您的锚标记。

    <a href="Javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between mt-2">
        <input  class="form-check-input ml-2" type="checkbox"
                ng-model="myvar"
                ng-checked="myvar == 1"
                ng-true-value="1" ng-false-value="0">
      </div>
    </a>

Here 是工作示例。

【讨论】：