Question

我正在尝试创建一个包含复选框以及其他输入元素的Web表单，并且我想在单击包络div元素时为用户提供检查和取消选中框的功能。

以下是HTML的示例：

<div class="line">
  <input type="checkbox" />
  <p>No, I don't want more newsletters</p>
</div>

足够简单。现在，当用户单击该复选框时，它将被选中/取消选中，并且事件会冒泡到div.line元素，这可能会更改其背景颜色或其他内容。现在，正如我所说，我还希望用户能够通过单击div来操作复选框值。听起来很简单;我们只需在div.line元素中添加一个观察者，捕获事件并切换复选框值。嗯，这是问题所在：当您单击复选框时，它的值将被切换。但是，由于它位于div中，您还可以单击div，触发其观察者，然后再次切换复选框值。所以你最终到了开始的地方。发生了两次切换。

我一直在破坏我的大脑，尝试所有不同的方法。自定义事件，自定义元素标志......在单个函数运行期间根本没有办法告诉它是否是被单击的复选框或者它是否是周围的div元素。但必须有办法，我就是看不到它。

有没有人有线索？顺便说一下，我正在使用Prototype。

Answer 1

使用<label>元素与适当的for attribute：

<label for="cb"><input type="checkbox" id="cb" /> Click anywhere here</label>

Demo here。

好处是标记在语义上变得友好。请注意，如果您像这样包装目标控件，for属性在技术上是可选的，但IE＆lt; 7不支持（但在发布此示例时工作正常）。

Answer 2

您不必将任何事件绑定到内部输入元素。您只需要将事件附加到父div，您就应该能够实现您想要做的事情。该行为基于事件冒泡机制。当您单击输入框时，事件将冒泡到外部div（而不是事件捕获 - 从父项遍历其子项）。

因此，div.line的一个简单的事件处理程序可以帮到你。

$('.line').click( function (evt ) {
    console.log("change color here");
    $('input[type="checkbox"]').attr('checked','checked');
});

嵌套元素中的多个事件

2 个答案: