复选框显示隐藏字段 – 不工作onload

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

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

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

Answer 1

最简洁的说：

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

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

Answer 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来查找它们。

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