单击自定义跨度时复选框值从 0 更改为 1

Question

我正在尝试在我正在构建的表单中使用自定义复选框样式here

当我单击复选框的标签时，复选框的值从 0 变为 1，反之亦然。但是，如果我单击包含自定义图像样式的跨度框本身，则该值不会改变。下面是一个 HTML 示例和我用来更改它的 jQUery 代码。我也希望在单击跨度时更改该值。

HTML：

<div class="col-xs-12  tick1">
 <span class="checkbox" style="background-position: 0px -48px;"></span>
 <input type="checkbox" name="custom9" id="custom9" class="styled">
  <label for="custom9">Have you received your entire order from Plush?
  <span class="mandatory tick1Mandatory"> * </span> </label>
</div>

JS：

$('#custom9').on('change', function () {
  this.value = this.checked ? 1 : 0;
}).change();

Answer 1

它在“chrome 版本 29.0.1547.66 m”、“firefox 版本 22.0”中运行良好。但如果在其他浏览器中不起作用，您可以测试以下代码：

JsFiddle Link

$('div.ticks div.col-xs-12 input,div.ticks div.col-xs-12 input label').on('click',function () {
 // this.value = this.checked ? 1 : 0;    
 var checkBox = $(this).find("input:checkbox");
checkBox.value = checkbox.checked ? 1 : 0;    
});