複選框顯示隱藏字段 - not working onload

如果複選框被選中，我正在使用這個可能很醜的JavaScript來顯示文本框（在li標籤中加上其標籤）。複選框顯示隱藏字段 - not working onload

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

這工作正常，但如果一個頁面被加載並已經選中該複選框，因爲＃麗2-21被自動隱藏它不工作。

我是否需要創建一個讀取複選框狀態的函數？還是有更簡單的方法？

哦，也可以隨意縮短那些醜陋的代碼，我想有一個更短的方法來實現我的目標？非常感謝您的幫助！

來源

2010-08-26 Julian

最簡潔：

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

編輯：從點擊切換來改變事件

來源

2010-08-26 23:21:39

看起來不錯，但是當您點擊複選框時沒有做任何事情？ – Julian 2010-08-26 23:38:23

爲什麼不呢？事件處理程序是在頁面加載時設置的，因此它會在之後切換可見性。在頁面加載時，我們將checkbox click綁定到根據複選框狀態顯示/隱藏listitem的函數。我們還通過點擊（））該事件處理程序一次，以便它在開始時正確設置顯示css 我錯過了一個paren - 也許你沒有捕捉到..我編輯 – 2010-08-26 23:43:10

幾乎完美。現在載入的文本字段被隱藏，但複選框被選中。如果我將複選框設置爲在html中檢查，onload文本字段出現，但複選框被取消選中。 – Julian 2010-08-26 23:56:22

提取您的點擊功能到一個單獨的功能（不是內聯），並在頁面的加載運行它：

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來找到它們。

來源

2010-08-26 23:22:23

這看起來非常複雜，而且工作正常，但是如果取消選中該複選框，則文本字段不會隱藏在onload中。我在這裏不瞭解什麼？ – Julian 2010-08-26 23:36:40

已編輯答案。我應該更具體一些，因爲一旦文檔準備就緒，切換呼叫和點擊分配就需要發生。 '$（function（）{}）;'調用將確保發生。 – 2010-08-26 23:47:45

對不起，我真的很糟糕的JS，但這仍然不隱藏文本字段onload如果複選框未選中？ – Julian 2010-08-27 00:03:48

只要在定義函數時立即調用函數。例如：

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

來源

2010-08-26 23:22:55 Robert

複選框顯示隱藏字段 - not working onload

回答

相關問題