IE 未检测到复选框的 jquery 更改方法答案

【问题标题】：IE not detecting jquery change method for checkboxIE 未检测到复选框的 jquery 更改方法
【发布时间】：2011-02-02 18:25:01
【问题描述】：

以下代码适用于 FF、Safari、Chrome。但是 IE 给我带来了问题。

当一个复选框被选中时，我无法让 IE 检测到它。

$("#checkbox_ID").change(function(){

   if($('#'+$(this).attr("id")).is(':checked'))
   { 
       var value = "1"; 
   }
   else
   { 
       var value = "0"; 
   } 
   alert(value);

   return false;
});

简单地说，我没有像预期的那样弹出警报。
我什至试过这样：

$("#checkbox_ID").change(function(){

   if( $('#'+$(this).attr("id")'+:checked').attr('checked',false))
   { 
       var value = "1"; 
   } 
   else
   { 
       var value = "0"; 
   } 
   alert(value);

   return false;
});

这是简单的复选框输入：<input class="prod" type="checkbox" name="checkbox_ID" id="checkbox_ID" value="1"/>

有人知道 IE 是否需要不同的 jquery 方法吗？还是我的代码刚刚关闭？

【问题讨论】：

标签： jquery checkbox internet-explorer

【解决方案1】：

如果您在单击复选框后单击其他位置，它可能会起作用。 IE就是这么奇怪。

可能会尝试类似：

$(function () {
  if ($.browser.msie) {
    $('input:checkbox').click(function () {
      this.blur();
      this.focus();
});

更多信息在这里：http://norman.walsh.name/2009/03/24/jQueryIE

【讨论】：

我知道指出这一点毫无意义（看看我在那里做了什么？：P），因为我确信这只是为了让 OP 测试他们的代码。但是由于您将模糊/焦点命令映射到单击操作，以触发更改操作，在这种情况下仅使用单击操作是否有意义？或者如果你真的觉得这是必要的，你可能应该调用 $(this).trigger('change');
这个想法对我很有效。我在prototypejs中使用它... if (Prototype.Browser.IE) { el.observe('click', function(e) { e.element().blur(); e.element().focus(); }); }

【解决方案2】：

正如 sblom 在 IE7 及以下版本中所指出的，您需要模糊元素才能触发此操作，更高版本的 IE 和其他浏览器不需要元素显式失去焦点，只需更改即可触发此事件（如图所示在我下面的例子中）。

我认为您的问题可能是您尝试访问超出范围的“值”变量。

$("#checkbox_ID").change(function(){
var value;
if($(this).is(':checked'))
{ 
    value = "1"; 
}
else
{ 
    value = "0"; 
} 
alert(value);

return false; 
});

Here is a working preview，请注意，因为您在函数结束时返回 false，它会将复选框重置为之前的值，因为您取消了点击的效果。

【讨论】：

【解决方案3】：

仅当控件失去焦点后值发生更改时才会触发更改事件。对于复选框，最好连接到点击事件。

这里是关于 onchange 事件何时触发的文档：link text

【讨论】：

点击事件与更改完全不同。它通常非常接近，因此可以正常工作。但是有一些方法可以在真正发生更改时调用 IE 强制更改。
这里是有关更改事件的更多信息。 quirksmode.org/dom/events/change.html.
并非在所有情况下都是如此，请参阅下面来自 jQuery API 文档的引用。 “对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会延迟到元素失去焦点为止。”引用自api.jquery.com/change

【解决方案4】：

您需要使用propertychange 事件而不是change 事件。请记住，propertychange 事件将触发除选中/未选中之外的事物。为了弥补这一点，您必须检查window.event.propertyName（仅适用于 IE）：

$(':checkbox').bind($.browser.msie ? 'propertychange': 'change', function(e) {
    if (e.type == "change" || (e.type == "propertychange" && window.event.propertyName == "checked")) {
        // your code here
    }
});

【讨论】：

这在 IE9+ 上中断。需要检查IE8及以下浏览器版本。

【解决方案5】：

尝试使用

jQuery('#checkbox').click(handleFunc);

而不是事件“改变”

【讨论】：