当参数是函数时jQuery切换不起作用

Question

我试图用toggle()来完成我的点击事件。在这种情况下，我读了API，并使用toggle(function1, function2, ...)。但它很奇怪。当我点击标签时，标签就隐藏起来，而不是在里面执行这些功能。

这是我的javascript代码。

function clickMe(){ 
    $("#lime").toggle(
     function(){ 
      var names = document.getElementsByName("selectOne"); 
      var len = names.length; 
      if (len > 0) { 
       var i = 0; 
       for (i = 0; i < len; ++i) { 
        names[i].checked = true; 
       } 
      } 
     },function(){ 
      var names = document.getElementsByName("selectOne"); 
      var len = names.length; 
      if (len > 0) { 
        var i = 0; 
        for (i = 0; i < len; ++i) { 
         names[i].checked = false; 
        } 
      } 
     } 
    ) ;  
} 

这里是HTML代码。

<a href="javascript:void(0);" onclick="clickMe()" id="lime">selectAll</a> 
    <form> 
    <input type="checkbox" name="selectOne" /><br /> 
    <input type="checkbox" name="selectOne" /><br /> 
    <input type="checkbox" name="selectOne" /><br /> 
    <input type="checkbox" name="selectOne" /><br /> 
    <input type="checkbox" name="selectOne" /><br /> 
    <input type="checkbox" name="selectOne" /><br /> 
    </form> 

我在等待评论。感谢提前！

Answer 1

This functionality has been removed in jQuery 1.9。

用这个代替（适用于旧版本太）：

$(function ($) { 

    var inputs = $('input[name=selectOne]'); 

    $("#lime").click(function() { 
     inputs.prop('checked', ! inputs.prop('checked')); 
    }); 
}); 

这里的小提琴：http://jsfiddle.net/3GQDU/

---

正如指出的@Andre，如果第一个是通过手工检查，它然后将取消全部选中。如果这不是你想要的，用这个：

$(function ($) { 

    var inputs = $('input[name=selectOne]'), 
     flag = true; 

    $("#lime").click(function() { 
     inputs.prop('checked', flag); 
     flag = ! flag; 
    }); 
}); 

这里的小提琴：http://jsfiddle.net/3GQDU/1/

Answer 2

$(function(){ 
    var check = true; 
    $("#lime").click(function(){ 
     $('input[name=selectOne]').prop('checked', check); 
     check = !check; 
    }); 
}); 

通过这样做，你就不需要了“的onclick”属性中#lime元素。只需将其删除，并让jQuery为您绑定点击处理程序。这通常是一件好事，因为它将结构和行为分开。

编辑：

如果需要再现老的jQuery的切换行为的功能，这里是它的：

(function($){ 
    $.fn.toggleHandlers = function(eventType){ 
     var i = 0; 
     var handlers = $.makeArray(arguments).slice(1); 
     return this.bind(eventType, function() { 
      handlers[i].apply(this, arguments); 
      if(i < handlers.length -1) 
       i++; 
      else 
       i = 0; 
     }); 
    }; 
})(jQuery); 

从jQuery的切换不同的是，它得到一个额外的参数（第一个），那就是事件类型。因此，它适用于点击以外的事件。称其为：

$("#myElement").toggleHandlers('click', handler1, handler2[, handler3]); 

见琴：http://jsfiddle.net/andreortigao/j9MH2/