复选框显示隐藏字段 - 无法加载答案

【问题标题】：Checkbox shows hidden field - not working onload复选框显示隐藏字段 - 无法加载
【发布时间】：2011-04-04 13:30:15
【问题描述】：

如果选中了一个复选框，我正在使用这个可能很难看的 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 会自动隐藏。

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

哦，还可以随意缩短那个丑陋的代码，我想有一种更短的方法可以实现我的目标？非常感谢您的帮助！

【问题讨论】：

标签： javascript jquery checkbox hide show

【解决方案1】：

最简洁：

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

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

【讨论】：

看起来不错，但是当你点击复选框时什么也没做？
为什么不呢？事件处理程序是在页面加载时设置的，因此它会在此后切换可见性。在页面加载时，我们将复选框单击绑定到根据复选框状态显示/隐藏列表项的功能。我们还触发（通过click（））该事件处理程序一次，以便它在开始时正确设置显示css我错过了一个paren - 也许你没有抓住那个..我已经编辑了
几乎完美。现在 onload 文本字段被隐藏，但复选框被选中。如果我将复选框设置为在 html 中选中，则 onload 文本字段会出现，但复选框未选中。

【解决方案2】：

将您的点击函数提取到一个单独的函数中（不是内联）并在页面加载时运行它：

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(); 
});

如果您想稍微清理一下，我会将复选框和语言元素提取到单独的变量中：

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

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

【讨论】：

这看起来非常精致并且有效，但如果未选中该复选框，则文本字段不会在加载时隐藏。我在这里不明白什么？
已编辑答案。我应该更具体一点，因为一旦文档准备好，切换调用和点击分配就需要发生。 $(function() { }); 电话将确保发生这种情况。
对不起，我的 JS 真的很糟糕，但是如果未选中复选框，这仍然不会隐藏文本字段 onload？

【解决方案3】：

只需在定义函数后立即调用该函数。示例：

   $("#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();

【讨论】：