[英]jQuery Checkbox Event Handler Bug
我最近发现了一个关于 jQuery 和复选框事件处理的问题,我似乎无法弄清楚。
应该发生的是:
当我反复/快速单击灰色框图像图块时,您会看到有问题的错误。 默认行为(切换checked 属性)似乎是在事件处理程序触发后随机发生的。 结果,这会导致关联的选定框图像和复选框彼此随机不同步,从而提供不准确的数据。
请转至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;
}
为了更好地绑定“ label
- input
”对,需要使用“ for="someId"
- id="someId
"对。你的错误是在检查click
.sa-checkbox-img
块内标签时需要检查click
在.sa-checkbox
。因为所有时间,当您单击与复选框绑定的某个内部标签时,都会触发此复选框上的click
事件,但单击复选框不会触发对标签的click
。
祝你好运!
哇,这个错误很难破解,直到我意识到你代码中的小错误! 我不知道发生了什么,但我终于解决了。 您可以在此处找到解决方案。 我也能够浓缩你的逻辑。 主要的变化是标签元素。 你忘记了 for 属性!
<label for="imgCheck1" class="icon-img-label">SCHOOL</label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.