单击自定义范围时，复选框值将从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;    
});