通過複選框顯示JQuery - div的可見性

Question

我的頁面上有一系列匹配的複選框和div。當選中/取消選中時，每個複選框都需要能夠顯示/隱藏相應的div。每個div在頁面加載時開始隱藏。我已閱讀了許多有關類似問題的主題，但我無法獲得任何示例來滿足我的要求。

我在JSFiddle上設置了一個例子：http://jsfiddle.net/shimmoril/wzMM4/11/。我認爲有style =「display：none;」在div上可能會搞亂JQuery，但是當我從第一個div中刪除它時，toggle仍然不起作用。

感謝您的幫助。

Answer 1

看着你的代碼有：

<input type="checkbox" id="checkbox1" value="1" /> 

然而，你的jQuery是尋找類：

$('.checkbox1').change(function() { 
    $('#div1').toggle(!this.checked); 
}); 

它應該是：$（ '＃checkbox1'）

Answer 2

如果所有的div都將開始隱藏，所有的複選框都將被取消選中，然後您可以在更改事件中調用toggle（）：http://jsfiddle.net/wzMM4/12/

如果可能並非如此，你應該先添加一些代碼在頁面加載div可見同步：http://jsfiddle.net/wzMM4/26/

Answer 3

我看到了兩件事情錯了你的jsfiddle。一，你已經設置爲MooTools，你試圖測試jQuery。其次，你需要爲checkbox1選擇設置爲ID，不是一類

更改您的小提琴jQuery的，然後使用這個腳本代碼（即＃代替。）：

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     $('#div1').toggle(!this.checked); 
    }); 
});​ 

Answer 4

的小提琴沒有按因爲它使用的是MooTools，所以不會運行，因爲它是一個關鍵點 - 您引用複選框的類而不是它的ID。更新它以使用jquery並將您的代碼更改爲

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     $('#div1').toggle(!this.checked); 
    }); 
});​ 

使其工作。如果您確定佈局，可以使用類似於以下內容的方式來處理所有複選框，這是通用的方式 - 在檢查任何複選框後，切換第二個元素（您的div）：

$(document).ready(function() { 
    $('input[type="checkbox"]').click(function() { 
     $(this).next().next().toggle(this.checked); 
    }); 
});