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

标签 javascript jquery html web

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

这是我的 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>

我在等评论。提前致谢!

最佳答案

This functionality has been removed in jQuery 1.9 .

改用它(也适用于旧版本):

$(function ($) {

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

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

这是 fiddle :http://jsfiddle.net/3GQDU/


正如@Andre 所指出的,如果第一个是手动检查的,那么它将取消所有的检查。如果这不是您想要的,请使用:

$(function ($) {

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

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

这是 fiddle :http://jsfiddle.net/3GQDU/1/

关于javascript - 当参数是函数时,jQuery 切换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16127616/

相关文章:

html - Bootstrap CDN 未加载

html - "Responsive"水平列出元素?

javascript - 粘性菜单 - 在某些页面上隐藏但在其他页面上不隐藏

WordPress 中的 jQuery 在 Chrome 中无法按预期工作

html - CSS child/nth child/typeof 选择器

php - 在 php 中合并和压缩多个 JavaScript 文件

javascript - 如何使用 ondrop 事件访问类元素内的段落元素并将其删除?

javascript - 更改 objective-c 中 wkwebview 套件中 <br> <div> 和 <span> 的边距

javascript - 手写 asm.js - 如何跟踪堆中的 javascript 对象?

鼠标悬停时不显示 JavaScript 元素