带有复选框问题的 Jquery focus()答案

【问题标题】：Jquery focus() with checkboxes problem带有复选框问题的 Jquery focus()
【发布时间】：2011-10-30 15:40:09
【问题描述】：

当用户关注输入字段时，我们使用自定义 jquery 插件来处理我们的帮助弹出窗口。但是我偶然发现了一个奇怪的问题。该插件使用以下代码触发帮助弹出：

$(this).focus(function(){
    // Show popup help panel here
});

但是，如果将此代码应用于 type="checkbox" 的输入，则会显示帮助弹出窗口，但复选框值会迅速否定自身，因此似乎没有从勾选变为未勾选，反之亦然。这发生在 IE9 和 FF6 中（未在其他浏览器中尝试过）。我尝试了这个非常简单的代码，只是为了确保我没有发疯，但问题仍然存在：

...在html中：

<input id="test" type="checkbox" checked="checked" />

... 在头 - javascript

$('#test').focus(function(){
    alert("help!");
});

显示警报，但复选框值未更改（或已更改但随后又更改回来，正如我认为正在发生的那样）。

任何人都可以对此有所了解。

【问题讨论】：

【解决方案1】：

为什么要绑定复选框的“焦点”？

这对我来说没有多大意义，因为“焦点”主要用于文本框或文本区域。我会改用.click 或.change，我想你会有更好的运气。

在 jsfiddle (http://jsfiddle.net/65CRb/1) 上进行了一些测试，绑定 focus 甚至在 Chrome 中根本不起作用。我怀疑在 IE/FF 中发生了一些奇怪的事件，当您集中注意力时不会传播到实际控件本身。

【讨论】：

我会尝试点击。焦点可能与复选框有问题。该事件可能在呈现检查/勾选之前发生。可能会导致它双击，看起来它正在否定它自己。
@Adam - 这就是我最初的想法，但是有一种情况是用户使用 tab 键来改变焦点，在这种情况下复选框被聚焦，但它的值不应该改变。希望这是有道理的。
所以...我再问一次，为什么要使用焦点？您想在他们使用 tab 键突出显示它时采取行动，而不是在他们单击它时采取行动？或者两者兼而有之，但您还希望点击工作？复选框上的“聚焦”功能根本不是一个好的设计决策。我强烈建议对你认为需要这样做的任何事情采取不同的方法。就像我之前说的，Chrome 完全不支持它，而且可能 Safari 也不支持。
好吧，我只是用 chrome 来关注带有 tab 键的复选框，然后按空格键检查它，所以它与“完全不支持”完全相反。我只是希望在输入的焦点和点击方面保持一致，无论是文本、复选框还是其他。
我不是说你不能聚焦在元素上，我是说点击它不会触发聚焦事件。

【解决方案2】：

focus 不会改变复选框的checked 属性。您必须明确更改其检查属性。像这样。

$('#test').focus(function(){
    this.checked = !this.checked;
});

【讨论】：