Question

由于我不熟悉Web开发，我正在开发一个基于Web的应用程序，并注意到即使是简单的JavaScripts也没有在我的JSP页面上运行。我正在尝试实现类似于此的东西： http://jsfiddle.net/chriscoyier/bphze/76/ 我甚至创建了一个全新的项目，以确保问题不在我的代码中。这是新页面：

<html>
<script type="text/javascript">
<!--
//JavaScript goes here
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
//-->
</script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
    <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
    <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
    <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
    <input type="submit" value="Do thing" disabled>
</div>
</form>
</html>

即使是像上面那样简单的代码也不会执行。我在这里缺少什么？，我需要将一些内容导入到我的项目文件中吗？请告知，我正在使用NetBeans，并在Firefox上运行该项目。

Answer 1

正如其他人所指出的，如果你还没有包含jQuery，你需要这样做才能使用像

这样的语句

 $("input[type='checkbox']")

您可以在当前脚本之前将此行添加到html文件中。确保它周围有html标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

此外，在您的文件顶部，您可以打开html评论

<!--

尝试删除

Answer 2

您的代码存在许多问题，而不仅仅与JavaScript的执行有关。

尝试修改后的代码：

<!doctype html>

<html>

    <head>
        <title>My Page</title>
    </head>

    <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script>
        $(function() {

            'use strict';

            var checkboxes = $("input[type='checkbox']"),
                submitButt = $("input[type='submit']");

            checkboxes.on('click', function() {
                submitButt.attr("disabled", !checkboxes.is(":checked"));
            });

        });

        </script>

        <h1>Button should be enabled if at least one checkbox is checked</h1>

        <form>
            <div>
                <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
            </div>
            <div>
                <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
            </div>
            <div>
                <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
            </div>
            <div>
                <input type="submit" value="Do thing" disabled>
            </div>
        </form>

    </body>

</html>

我纠正的一些问题：

包含您似乎想要使用但尚未包含的jQuery库。
删除可能影响JS执行的HTML注释。
DOM Ready for jQuery code。
使用strict语句来正确执行JS。
HTML修复，例如正确添加头部和正文以及doctype。

JavaScript没有在我的任何项目上激动

2 个答案: