复选框和Javascript：不一致的单击事件+；选定状态

我正在为Angular中的Highcharts创建两个切换按钮。然而，我的问题更多的是一个一般的javascript问题，而不是角度图或高度图，因为我看到在使用带有复选框的严格jQuery时，这个问题会弹出

这是我的问题：当切换复选框时，我有时会单击复选框的外边缘，或者在附近打开另一个下拉列表，发现框状态没有改变，尽管单击上的函数仍然会触发

例如，如果打开附近的引导下拉框，然后在下拉框打开时单击复选框，则输入复选框的行为会很奇怪，不会更改状态，但仍会触发预期的功能

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

下面是一个演示我的示例的小视频剪辑：

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

---

我可以在JS中做些什么来阻止这种情况，或者这需要我做更多的修改吗？我在想，如果我不能解决这个问题，我就必须创建一个不可见的框，它位于按钮顶部，当附近的下拉框打开时就会显示出来。

我发现，如果我从按钮切换范围，我可以远程触发输入复选框，按钮在附近有或没有扩展的下拉框时都会显示出来

<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;">

---

能否更改

toggleGrp

的行为，使其根据复选框的值而不是以前的属性值设置属性？也就是说，有效地使其

setGrpFromCheckboxValue（check1）

而不是

toggleGrp（check1）

？

<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;">