Question

我有一个带有复选框的表单，然后是复选框右侧的文本。复选框的单击事件附加了jquery事件。我想要的是允许用户点击标签或复选框，并选中/取消选中复选框并触发事件。下面是我正在尝试做的简化版本（不要运行下面的代码，因为它创建了无限循环）。

<script>
$(document).ready(function() {
  $("form p").click(function() {
    $(this).find("input").click();
  });

  $("form input").click(function() {
    alert("clicked");
  });  
});
</script>


<form>
<p> <input type="checkbox" name="checker" value="1" /> Click anywhere</p>
<p> <input type="checkbox" name="checker2" value="2" /> Click anywhere</p>
</form>

Answer 1

使用LABEL标记：http://www.w3schools.com/tags/tag_label.asp

Answer 2

点击任意<input>标记会触发<p>标记的点击事件（因为<input>标记位于<p>标记内），然后触发点击事件{{ 1}}标签导致无限循环。

Answer 3

您可以使用jQuery's event.stopPropagation method阻止“无限循环”。

Jquery事件冒泡CheckBox

3 个答案: