jQuery：fadeToggle（）和複選框

Question

這是問題所在。我有一個複選框，當我選擇它時應該出現一個圖像，所以div元素最初是隱藏的。它不會工作。它起作用時，div是可見的開始。但在這種情況下，如果我選擇複選框，圖像將消失，當我取消選中複選框時，圖像將會顯示。我想完全相反。解決方法是在頁面加載時檢查複選框，但這是不可接受的。當頁面加載時，應該取消選中複選框並隱藏圖像。

<div id="pic1Div"> 
<img src=pic1.jpg> 
<br> 
This should be visible when checkbox is checked 
<br>It does exactly the opposite 
</div> 
<form> 
Show Picture <input type=checkbox name="pic1"> 
</form> 
<script> 
$(':input[name="pic1"]:first').click(function() { 
$('div[ID="pic1Div"]:first').fadeToggle("slow", "linear"); 
}); 
</script> 

Here's the source code

Answer 1

不要使用visibility: hidden，fadeToggle作品與display:none：

http://jsfiddle.net/mYpsF/

Answer 2

只是要複選框初步遏制，如果圖像是可見的，還是讓最初隱藏圖像和複選框選中。

看到一個example與最初隱藏的圖像。

和一個example與最初顯示的圖像。

---

在一個單獨的說明，有一個原因，你正在使用的屬性選擇通過 id選擇一個元素，而不是 id選擇：

$('#pic1Div')

而且因爲你只能有一個元素任何給定的id，您都不需要:first僞選擇器。