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

Question

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

应该发生的是：

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

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

请转至 https://jsfiddle.net/coreyds/5wLk2rge/4/

查看此示例和实际错误

您是否有解决此问题的解决方案，无论是 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 -->

jQuery

$('.sa-checkbox-img').click(function(){
    var $this = $(this),
        sa_checkbox = $this.find($('.sa-checkbox'));

    if( !$this.hasClass('checked')){
        $this.addClass('checked');
        sa_checkbox.prop('checked', true);
    } else {
        $this.removeClass('checked');
        sa_checkbox.prop('checked', false);
    }
});

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

Answer 1

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

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

Answer 2

为了更好地绑定“label-input”对，需要使用“for="someId"-id="someId”对。当 您需要检查 .sa-checkbox 上的 click 时，您的错误是在 .sa-checkbox-img 上检查 click 阻止了内部标签。因为当您单击某个与复选框绑定的内部标签时，总是会触发此复选框上的 click 事件，但单击复选框不会触发标签上的 click。

working example

祝你好运！

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

jQuery Checkbox Event Handler Bug

javascript

checkbox

jquery

event-handling

jquery-events