javascript - 复选框和 JavaScript : Inconsistent click event + selected state

Question

我正在 Angular 中为 Highcharts 构建几个切换按钮。然而，我的问题更多的是一般性的 javascript 问题，而不是关于 Angular 或 Highcharts，因为我在严格使用复选框的 jQuery 中工作时也看到过这个问题的弹出。

这是我的问题:切换复选框时，我有时会单击复选框的外边缘或在附近打开另一个下拉菜单，并发现尽管单击上的功能无论如何都会触发，但框状态并未更改。

例如，如果您打开附近的 Bootstrap 下拉框，然后在下拉列表打开时单击复选框，则输入复选框会表现得很奇怪，不会更改状态，但仍会触发预期的功能。

为了使复选框在此后自行更正，我必须重新切换状态按钮以匹配应该在该状态下触发的功能。

这是一个小视频剪辑，说明了我的示例:

http://screencast.com/t/YRaDchstI

<input type="checkbox" ng-model="check1" ng-click="toggleGrp(check1)" value="{true: check1 == true}">

尽管使用 value="{true: check1 == true}"作为故障保护来确定该框是否处于选中状态，但结果不一致。

我可以在 JS 中做些什么来阻止这种情况，还是需要我进行更多的修改？我在想，如果我无法解决问题，我将不得不创建一个位于按钮顶部的隐形框，并在附近的下拉框打开时显示出来。

Answer 1

我发现，如果我从按钮切换范围，我可以远程触发输入复选框，并且按钮的行为与附近有或没有扩展的下拉列表相同。

<button type="button" class="btn"
  ng-click="check1 = !check1"
  ng-class="{active: check1}"></button>

<input type="checkbox"
  ng-model="check1"
  ng-click="toggleGrp(check1)"
  style="visibility: hidden;">