如何选择复选框而不选择整行（见正文）？

说，我有一个html：如何选择复选框而不选择整行（见正文）？

<div class="row"> 
    <input type="checkbox"> 
</div>

当用户点击了整排的，而是会突出显示（由onClick事件添加selected类）。我将onClick事件附加到类.row的元素。
当用户点击复选框（在.row内）时，该复选框被选中。但行不应突出显示。

是否可以排除从.row的区域复选框的面积为onClick事件？

UPDATE

这是我现在有：http://jsfiddle.net/saAGU/

我不想被切换上课的时候我正好点击复选框上。

更新2

下面是用jQuery工作液以备将来使用：http://jsfiddle.net/saAGU/2/

来源

2013-06-21 Edward Ruchevits

我认为我们会需要比这多一点的代码。你可以给一些JavaScript用于onclick事件，更多的HTML和任何CSS，如果你有它？也许设置一个小提琴？ http://jsfiddle.net/ –

给我们带'onclick'事件的完整代码 – TechBytes

其他人都注意到这是一个JavaScript问题，没有提到jQuery，用jQuery的答案？ Javascript！= jQuery – PlantTheIdea

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

事情是这样的：

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

请告诉我，如果它的工作

来源

2013-06-21 18:12:17

谢谢，那对我有效。 –

添加单击事件到每一个复选框，并停止其传播史。这应该工作 -

e.stopPropagation在复选框点击事件处理程序

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

来源

2013-06-21 18:11:03 jason

如果捕获事件，并期待在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'); 
});

来源

2013-06-21 18:20:55 SpenserJ

不知道为什么这会收到downvote。通过添加一个onclick复选框并调用stopPropagation（），你只能解决单个元素的问题。如果Edward向该行添加另一个元素，则他必须添加另一个onclick和stopPropagation（）。通过在行的onclick中检查事件目标，您可以立即解决_all_子元素的问题。 – SpenserJ

它的作品，以及我也不知道为什么downvoted。 –

如何选择复选框而不选择整行（见正文）？

回答

相关问题