如何在不选择整行的情况下选择复选框(参见正文)?

时间:2013-06-21 18:07:05

标签: javascript html css onclick

说,我有一个HTML:

<div class="row">
    <input type="checkbox">
</div>
  1. 当用户点击整行时,它会突出显示(selected事件添加的onClick类)。我将onClick事件附加到类.row的元素。

  2. 当用户点击复选框(位于.row内)时,此复选框将被选中。但不应突出显示行。

  3. 是否可以从.row事件的onClick区域中排除复选框的区域?


    更新

    以下是我现在的情况:http://jsfiddle.net/saAGU/

    当我完全点击复选框时,我不希望切换课程。


    更新2

    以下是jQuery的工作解决方案,供将来使用:http://jsfiddle.net/saAGU/2/

3 个答案:

答案 0 :(得分:3)

是的,这是可能的。正确的方法是在复选框上放置一个onclick事件,捕获事件并停止传播。

这样的事情:

function checkboxClick (e) {
    e.stopPropagation();
}

请告诉我它是否有效

答案 1 :(得分:2)

将click事件添加到每个复选框并停止其传播。这应该有效 -

复选框的事件处理程序中的

e.stopPropagation单击

http://jsfiddle.net/saAGU/3/

答案 2 :(得分:0)

如果您捕获事件,并查看event.toElement,您可以看到他们是否点击了.row或其他内容。

http://jsfiddle.net/saAGU/1/

$('.row').click(function(event){
    if (event.toElement !== this) // Did the user click on the row directly?
        return;

    $(this).toggleClass('selected');
});