Javascript 复选框显示隐藏字段-加载时不工作

如果选中复选框，我将使用这个可能很难看的javascript来显示一个文本框（在li标记及其标签中）

   $("#li-2-21").css("display","none");
   $("#Languages-spoken-and-understood-8").click(function(){
    if ($("#Languages-spoken-and-understood-8").is(":checked"))
    {
        $("#li-2-21").show("fast");
    }
    else
    {     
        $("#li-2-21").hide("fast");
    }
  });

这很好，但是如果加载了页面并且复选框已经被选中，那么它就不起作用了，因为#li-2-21会自动隐藏

我是否需要创建一个读取复选框状态的函数？还是有更简单的方法

哦，也可以随意缩短那些难看的代码，我想有一个更短的方法来实现我的目标吗？ 非常感谢你的帮助

最简洁地说：

$(document).ready(function() {
   $("#Languages-spoken-and-understood-8").change(function() {
      $("#li-2-21")[$(this).is(":checked") ? 'show' : 'hide']("fast")
  }).change();
});

---

编辑：从单击切换到更改事件

将单击函数提取到单独的函数（非内联）中，并在加载页面时运行它：

function ToggleCheckbox() {
    if ($("#Languages-spoken-and-understood-8").is(":checked"))
    {
        $("#li-2-21").show("fast");
    }
    else
    {     
        $("#li-2-21").hide("fast");
    }
}

$(function() {
    $("#Languages-spoken-and-understood-8").click(ToggleCheckbox);
    ToggleCheckBox(); 
});

如果您想稍微清理一下，我会将checkbox和languages元素提取到单独的变量中：

var languages = $("#Languages-spoken-and-understood-8");
var checkbox = $("#li-2-21");

---

但要确保将它们放在适当的范围内。这意味着jQuery不需要不断地重新查询DOM来找到它们。

只要在定义其函数后立即调用该函数即可。例如：

   $("#Languages-spoken-and-understood-8").click(function(){
    if ($("#Languages-spoken-and-understood-8").is(":checked"))
    {
        $("#li-2-21").show("fast");
    }
    else
    {     
        $("#li-2-21").hide("fast");
    }
  }).click();

---

这看起来非常复杂，可以工作，但是如果复选框未选中，文本字段在加载时不会隐藏。我在这里不明白什么？我已经编辑了答案。我应该说得更具体一些，切换调用和单击分配需要在文档准备好后进行。

$（函数（）{}）调用将确保发生这种情况。很抱歉，我对JS非常不在行，但如果复选框未选中，这仍然不会隐藏文本字段onload？看起来不错，但单击复选框时不会执行任何操作？为什么不？事件处理程序是在页面加载时设置的，因此它将在加载后切换可见性。。在页面加载时，我们将复选框单击绑定到一个函数，该函数根据复选框状态显示/隐藏列表项。我们还启动（通过click（））该事件处理程序一次，以便它在开始时正确设置显示css我缺少一个参数-可能您没有捕获到。。我编辑得近乎完美。现在onload文本字段被隐藏，但复选框被选中。如果我将复选框设置为在html中选中，则会显示onload文本字段，但复选框未选中。