Javascript 在网页上运行JS函数的问题_Javascript_Html

Javascript 在网页上运行JS函数的问题

javascript html

Javascript 在网页上运行JS函数的问题,javascript,html,Javascript,Html,我试图使用javascript函数使一个简单的输入文本框消失，我使用css使其消失，但使其淡入淡出的javascript部分不起作用。我从他那儿得到了小提琴我的页面的淡化版本如下所示： <html lang="en"> <head> <title>Volunteer Form</title> <script type="text/javascript" src="script.js"></script>

我试图使用javascript函数使一个简单的输入文本框消失，我使用css使其消失，但使其淡入淡出的javascript部分不起作用。我从他那儿得到了小提琴

我的页面的淡化版本如下所示：

<html lang="en">

<head>  
    <title>Volunteer Form</title>
    <script type="text/javascript" src="script.js"></script> 
    <style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
    .todisplay {
    display:none;
    }
    </style>
</head>
<body>

<input type="checkbox" name="typeofwork[]" value="other" class='checkdisplay' > Other <br><br>

<div class='todisplay'>
    <b>Other Tasks</b><br>
    if checked other, type below.<br>
    <input type="text" name="othertasks"><br><br>
</div>

<div class='todisplay'>test</div>

我还尝试在页面底部和标记之间放置相同的脚本，如下所示：

</body>
<script type="text/javascript" src="script.js">
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});</script> 
</html>


$（文档）.ready（函数（）{
$（'.checkdisplay'）.change（函数（）{
如果（this.checked）$（'.todisplay'）.fadeIn（'slow'）；
else$（'todisplay'）.fadeOut（'slow'）；
});
});

很抱歉，我对javascript的理解很糟糕，我试着按照另一个堆栈溢出页面中的fiddle指令进行操作，但我不知道为什么它不会执行。我想尽一切办法。有人能帮忙吗？

别忘了导入JQuery库

另外（这与您的问题无关），将

和

放在控制块（您的

if

语句的分支、循环等）周围，以避免混淆并防止代码中出现错误

此外，在元素的

name

或

id

属性中使用特殊字符通常是个坏主意。复选框的名称为

name=“typeofwork[]”

。您应该考虑将其更改为字母数字值。

//此代码可以位于外部脚本文件中，但必须引用该文件
//类似于JQuery与HTML元素一起导入的方式。或者，你
//可以将此代码放置在元素中，并将该元素放置在
//HTML（就在结束正文标记之前）或HTML部分内部。
$（文档）.ready（函数（）{
$（'.checkdisplay'）.change（函数（）{
如果（这个.勾选）{
$（'.todisplay'）.fadeIn（'slow'）；
}
否则{
$（'todisplay'）.fadeOut（'slow'）；
}
});
});

志愿者表格
.fieldset自动宽度{
显示：内联块；
}
.todisplay{
显示：无；
}
其他


其他任务

如果选中“其他”，请在下面键入。




测试
是否导入了jQuery？否。。。我该怎么做？除了@Lixus comment之外，请将库放在脚本之前，这样它就可以工作了。我忘了我必须这样做，因为我甚至没有意识到我使用的javascript函数是jquery。我尝试了所有这些方法，但仍然不起作用！！！我永远无法让jquery工作！！开发人员控制台中是否出现错误？正如您所看到的，在导入JQuery之后，它在这里工作。您的代码中的其他内容现在一定有问题。该死！！！！！！！！！！！！！我忘了再次更改我的js文件的权限！！！！！！！我以为我再也不会犯那样的错误了，直到我陷入不安全的境地。。您知道如何使WinSCP中的新文件自动具有0755权限吗？谢谢，顺便说一句。很高兴你能工作。不，我不能帮你使用WinSCP。祝你好运
</body>
<script type="text/javascript" src="script.js">
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});</script> 
</html>