用jQuery覆盖JavaScript中的复选框

单元测试复选框行为的帮助。我有这个网页：用jQuery覆盖JavaScript中的复选框

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
      $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

      $('#makeHidden').click(function() { 
       var isChecked = $(this).is(':checked'); 

       if (isChecked) { 
        $('#displayer').hide(); 
       } 
       else { 
        $('#displayer').show(); 
       } 
       return false; 
      }); 

     }); 

    </script> 
</head> 
<body> 
</body> 
</html>

这不起作用，这是因为点击处理程序中的return false;。如果我删除它，它效果很好。问题是，如果我拉的点击功能伸到它自己的功能和单元测试与qunit也不会没有return false;

[编辑] 工作中使用@帕特里克的答案我的结果是：

火狐：

手动测试玩具 - 好。
单元测试 - 很好。
生产应用程序的手动测试 - 良好。

的Internet Explorer：玩具

手册试验 - 失败。
单元测试 - 很好。
生产应用程序的手动测试 - 失败。

Internet Explorer首先需要一次单击。之后，它需要两次点击。

我以为jQuery将抽象掉浏览器？

我将不得不重写解决方案的整个复选框行为？

在我的单元测试，这是我过得怎么样用户的复选框仿真：

$(':input[name=shipToNotActive]').removeAttr('checked'); 
$('#shipToNotActive').change();

也：

$(':input[name=shipToNotActive]').attr('checked', 'checked'); 
$('#shipToNotActive').change();

来源

2010-05-20 Gutzofter

如何关于使用change而不是click？

$('#makeHidden').change(function() { 
      var isChecked = $(this).is(':checked'); 

      if (isChecked) { 
       $('#displayer').hide(); 
      } 
      else { 
       $('#displayer').show(); 
      } 
      return false; 
     });

的return false;不会在路上，因为在事件被触发为已经发生变化的结果。

来源

2010-05-20 15:34:06 user113716

这在我玩具的例子中工作到目前为止。现在让我用真正的代码运行我的测试！ – Gutzofter 2010-05-20 15:39:37

听起来不错。让我知道结果如何。 – user113716 2010-05-20 15:48:29

在Firefox中很有魅力。 Firefox：手动测试玩具 - 很好。单元测试 - 很好。生产应用程序的手动测试 - 很好。 Internet Explorer：手动测试玩具 - 失败。单元测试 - 很好。生产应用程序的手动测试 - 失败。 Internet Explorer首先需要一键单击。之后，它需要两次点击。 – Gutzofter 2010-05-20 16:03:56

试试这个：

$(function() { 
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

    $('#makeHidden').click(function() { return onCheckboxClicked(this) }); 
}); 

function onCheckboxClicked(el) { 
    var isChecked = $(el).is(':checked'); 

    if (isChecked) { 
     $('#displayer').hide(); 
    } 
    else { 
     $('#displayer').show(); 
    } 
    return false; 
}

来源

2010-05-20 15:32:02

一直走下这条路。因为返回false，它会覆盖复选框的行为。它会一直被检查。它确实运行了点击操作，但是随后在复选框内部重置了已选中的属性。真的智障。发生在ie和firefox – Gutzofter 2010-05-20 15:38:06

Here is a work around.

现在我的代码是这样的：

 if ($.browser.msie) { 
      $('#makeHidden').change(function() { 
       this.blur(); 
       this.focus(); 
       onCheckboxClicked(); 
      }); 
     } 
     else { 
      $('#makeHidden').change(function() { 
       return onCheckboxClicked(); 
      }); 
     }

我所有的测试，包括手工玩具，手工生产都不错。

有人比黑客有更好的东西吗？

来源

2010-05-20 16:54:34 Gutzofter

+1 - 有趣的是，我最近在一个类似IE的'change'问题上工作，除了'select'列表。该解决方案/黑客需要像你一样的本地API'blur（）'和'focus（）'。与你的不同，这个问题是第一次发生“改变”*不发射，然而第二次改变（以及随后的每次改变）都被解雇了。所以解决方案是一个jQuery'focus（）'，然后是一个本地'blur（）focus（）'。谢天谢地，没有浏览器检查是必要的，因为黑客只运行一次。我正在跟踪这个提醒。感谢您发布您的解决方案。 – user113716 2010-05-26 22:46:25

问题是我的单元测试没有发现问题。我认为这就是为什么你不应该测试gui。 – Gutzofter 2010-05-27 02:42:10

帮我解决了一个问题。不用检查IE浏览器，我只是发布模糊/焦点而不管浏览器。 – vol7ron 2011-10-05 17:48:04

用jQuery覆盖JavaScript中的复选框

回答

相关问题