1

我正在尝试使用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>

我在等评论。提前谢谢！

4

2 回答 2

3

此功能已在 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/

于 2013-04-21T03:23:46.797 回答
1 
$(function(){
    var check = true;
    $("#lime").click(function(){
        $('input[name=selectOne]').prop('checked', check);
        check = !check;
    });
});

通过这样做，您将不需要#lime元素中的“onclick”属性。只需删除它，让 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 toggle 的不同之处在于它获得了一个额外的参数（第一个），即事件类型。因此，它适用于点击以外的事件。称它为：

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

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

于 2013-04-21T03:41:35.863 回答