Флажок показывает скрытое поле - не работает при загрузке

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

Извлеките свою функцию щелчка мышью в отдельную функцию (не встроенную) и запустите ее при загрузке страницы:

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, чтобы найти их.

Answer 2

Наиболее кратко:

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

РЕДАКТИРОВАТЬ: переключено с щелчка для изменения события

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