Question

如果选中复选框，我正在使用这个可能难看的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();

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

3 个答案: