Question

单击一个复选框时，我会在表单上运行一些验证，这可以按预期工作。

$('#ilikeicecream').click(function(){
     runValidation();
});

该复选框还有一个标签元素，所以我也需要检查它。我的第一直觉是做以下事情：

$('#ilikeicecream-label').click(function(){
     runValidation();
});

问题是此时尚未检查复选框，因此验证无法按预期工作。我怎么能绕过这个？

Answer 1

这对你有用......

$('#ilikeicecream').change(function(){
     runValidation();
});

$('#ilikeicecream-label').click(function(){
     if($('#ilikeicecream').attr('checked')){
          $('#ilikeicecream').attr('checked', false);
     }
     else{
          $('#ilikeicecream').attr('checked', true);
     }
     runValidation();
});

Answer 2

使用<label>标记包装复选框。当您单击标签时，复选框将自动更改，从而触发change事件，您可以在其中调用runValidation()函数。

<label><input type="checkbox" value="1" id="blahblah" name="myname" /></label>

并将.change处理程序保留在复选框上（您的标签不需要单独的处理程序）...

Answer 3

使用change()：

$('#ilikeicecream').change(function(){
     runValidation();
});

对于选择框，复选框和单选按钮，会触发该事件当用户使用鼠标进行选择时，立即进行事件的其他元素类型延迟到元素丢失对焦。

我已经在jsFiddle中使用以下代码进行了测试。我无法提供链接，因为jsfiddle目前正在关闭。

<label for="ilikeicecream">sdsd</label><input id="ilikeicecream" type="checkbox" />

$('#ilikeicecream').change(function(){
     alert("test");
});

如果这不起作用，您可能未在for中指定label属性以匹配input。

Answer 4

$('#ilikeicecream-label').click(function(){
     // Swap the checked property value of the check box here
     runValidation();
})

如何处理标签点击+复选框点击？

4 个答案: