Javascript jQuery复选框事件处理程序错误

最近，我发现了一个关于jQuery和checkbox事件处理的问题，我似乎无法弄清楚

应该发生的是：

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <div class="form-group hwl-inline-checkbox-group">
            <label class="checkbox-inline">
                <div id="sa-checkbox-img1" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-briefcase fa-3x"></i>
                    <label class="icon-img-label">WORK</label>
                </div>
                <input type="checkbox" id="imgCheck1" name="surrounding_area" class="sa-checkbox" value="work" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img2" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-building fa-3x"></i>
                    <label class="icon-img-label">SCHOOL</label>
                </div>
                <input type="checkbox" id="imgCheck2" name="surrounding_area" class="sa-checkbox" value="school" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img3" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-meh-o fa-3x"></i>
                    <label class="icon-img-label">NO PREFERENCE</label>
                </div>
                <input type="checkbox" id="imgCheck3" name="surrounding_area" class="sa-checkbox" value="no preference" />
            </label>
        </div>

    </div>
</div>
<!-- end .row -->

• 单击与特定复选框关联的框图像
• 当方框图像标记为选中时（通过添加.checked类表示 并显示右上角复选标记指示器）关联的 还应选中复选框

当我反复/快速单击灰盒图像块时，您将看到有问题的bug。默认行为（切换选中属性）似乎是在事件处理程序触发后随机发生的。因此，这会导致关联的选定框图像和复选框彼此随机不同步，从而提供不准确的数据

请访问查看此示例和正在运行的bug

您有没有一个解决方案可以用jQuery或纯JavaScript解决这个问题

以下是相关代码：

HTML:

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <div class="form-group hwl-inline-checkbox-group">
            <label class="checkbox-inline">
                <div id="sa-checkbox-img1" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-briefcase fa-3x"></i>
                    <label class="icon-img-label">WORK</label>
                </div>
                <input type="checkbox" id="imgCheck1" name="surrounding_area" class="sa-checkbox" value="work" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img2" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-building fa-3x"></i>
                    <label class="icon-img-label">SCHOOL</label>
                </div>
                <input type="checkbox" id="imgCheck2" name="surrounding_area" class="sa-checkbox" value="school" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img3" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-meh-o fa-3x"></i>
                    <label class="icon-img-label">NO PREFERENCE</label>
                </div>
                <input type="checkbox" id="imgCheck3" name="surrounding_area" class="sa-checkbox" value="no preference" />
            </label>
        </div>

    </div>
</div>
<!-- end .row -->

CSS

.container,
.row {
    margin-top: 20px;
}

h5 {
    text-align: center;
}

.sa-checkbox-img {
  color: #999;
  border: 5px solid #999;
  padding: 10px 25px;
  text-align: center;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
}

.sa-checkbox-img label.icon-img-label {
  display: block;
}

.sa-checkbox-img i.fa.fa-check {
  display: none;
  color: white;
}

.sa-checkbox-img:hover {
  border-color: #009fd4;
  color: #009fd4;
  cursor: default;
}

.sa-checkbox-img.checked {
  border-color: #009fd4;
  color: #009fd4;
  cursor: default;
}

.sa-checkbox-img.checked i.fa.fa-check {
  display: block;
  background: #009fd4;
  position: absolute;
  top: -5px;
  right: -5px;
  color: white;
  padding: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

---

哇，这个bug很难破解，直到我意识到你代码中的小bug！我不知道发生了什么，但我终于解决了。你可以找到解决办法。我也能浓缩你的逻辑。主要的变化是label元素。您忘记了属性的名称

<label for="imgCheck1" class="icon-img-label">SCHOOL</label>

学校

为了更好地绑定“

标签”

-

输入”

“配对需要使用”

For=“someId”

-

id=“someId

“一对。您的错误在于选中

单击
上的
。sa复选框img
当您需要选中
单击
上的
。sa复选框
时，阻止标签内部。因为当你点击一些绑定了复选框的内部标签时，会触发
点击此复选框上的事件，但点击复选框不会触发
点击标签上的事件


祝你好运
 在意识到您的代码的真正问题后，我对我的答案进行了更改。我希望我的解决方案能够帮助你！最好的解决方案是在input和labelHi Andyry中为
使用pair
id，感谢您的回复，但请不要在没有添加代码或定义解决方案的情况下回复问题的解决方案。老实说，你的回答有些混乱，因为我似乎不明白你想说什么。请包括代码，因为这将有助于澄清您试图指出的内容。此外，我还在CSS中使用bootstrap，这就是为什么HTML的结构是这样的，最重要的是，这只是我正在进行的一个原型演示——这意味着我不必担心HTML的结构不是100%语义的。看看我的答案。我正在更新它并添加工作代码。嘿，不管怎样，你的解决方案似乎工作正常。我已把它标为正确答案。谢谢你的帮助！Cheesey Stephan，谢谢你的帮助不幸的是，这个错误仍然出现在你的脚本中。。。当我点击“无首选项”图像框时，它的关联复选框仍会出现错误，最终与它的关联图像框不同步。嘿，科里。你看的是正确的版本吗？链接应该是。这对我来说很好。除了我注意到，如果你点击复选框，然后点击与之相关的图像，它将是不同步的，但这是一个简单的修复，我相信你知道该怎么做。