Question

当我不仅点击复选框，而且还点击它所在的容器时，我正在尝试进行复选框检查。我遇到的问题是，当我选中一个复选框时，它会两次点击，因为它也点击了容器。我提出了以下似乎工作正常的解决方案，但我有一种感觉，有一种更简单的方法来做到这一点，我希望学会真正为什么短而紧凑的javascript，所以任何建议都会有所帮助:)

http://jsfiddle.net/masedesign/8q5TQ/

Answer 1

$(function(){
    $('td.cell input').click(function(e){
        e.stopPropagation();
    });

    $('td.cell').click(function(){
        $(this).find('input').click();
    });
});

e.stopPropagation()方法可防止事件冒泡。

Answer 2

只是为了好玩，我试图在没有javascript的情况下实现相同的效果：如果你对纯粹的CSS解决方案感兴趣，只能在新的浏览器上工作（它依赖于:checked伪类），请看这个小提琴：{{3 （但如果你感兴趣我可以通过旧IE的js后备来改进它）

编辑：js fallback的小提琴：http://jsfiddle.net/g6Sx7/2/此代码在IE6上也可以正常工作但这里的问题是关于CSS支持（相邻的兄弟运算符+是在IE6上不支持）：整个效果在那里不起作用，但无论如何你不能在那个浏览器中有一个盒子阴影...所以我认为这不是一个很大的问题。

Answer 3

如果你在选中复选框时没有执行任何其他任务，那么你写的js只是为了让盒子可以点击，那么我建议采用CSS方法而不是JS。

这是一个工作示例http://jsfiddle.net/8q5TQ/6/

注意：这适用于IE7 / 8/9 FF（最新安装在我的机器中）和Chrome（最新安装在我的机器中）

更新:(阅读你的评论后）我没有IE 6（对不起），但尝试了quirk的模式，并且工作正常。希望这会有所帮助：）

javascript复选框容器 - 是否有更简单的方法来编写它

3 个答案: