jQuery适用于jsFiddle不适用于wesite

Question

我有一个可在jsFiddle中使用的jQuery脚本，但在实际的网站上不起作用，并且我想不出其他办法。

这是小提琴

这是网站

我需要一个复选框，当单击该复选框时，它将依次检查许多其他复选框。

$("form input[id='selectall']").click(function () {
    var inputs = $("form input[class='produse4export']");
    for (var i = 0; i < inputs.length; i++) {
        if (this.checked) {
            inputs[i].checked = true;
            checkme();
        } else {
            inputs[i].checked = false;
            uncheckme();
        }
    }
});

选中这些复选框（一次全部选中）后，它们必须启用其他复选框。 取消选中它们后，其余复选框必须再次禁用和取消选中（如果已选中）。

Kinda很难解释，但是小提琴和网页都很容易阅读。 为什么它不能按预期工作？

Answer 1

您需要将script块移至其作用的元素下方 。

它的工作原理上的jsfiddle的原因是的jsfiddle有一个真正的脑死亡 令人惊讶的默认行为，也就是把所有的脚本在从被调用函数window#load事件。 （您可以在左侧看到它，它是从顶部开始的第二个选择框。）因此，在jsFiddle上，直到所有HTML都被解析并且元素存在之后，脚本代码才运行。 但是在您的网站上，您将代码置于其作用的元素之上，因此当您尝试获取它们时，它们尚不存在。

放置内容的口头禅是：“样式，内容，脚本”。 在所有内容之后，将样式表（内联和链接）放在文档的顶部，将内容放在正文中（显然），并将脚本放在底部。 这样，脚本运行时元素就存在于DOM中。

也可以看看：

• YUI加速网站的最佳做法
• Google Closure Library工程师就DOM元素何时可以进行脚本编写提供了帮助

Answer 2

在小提琴中，您是在页面加载时绑定事件。 在页面上，您尝试在解析页面本身时执行此操作。

在您的页面上，将事件处理程序绑定代码更改为：

$(document).ready(function() {
    $("form input[id='selectall']").click(function () {
        ...
    });
});