用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中的複選框

回答

相關問題