如何使用複選框切換另一個元素？

Question

如何檢查我的id是否爲UseUsername的複選框已被選中，然後使用該信息切換另一個元素爲id的div？

Answer 1

這是那麼容易，因爲：

$('#UseUsername').change(function(){ 
    if($(this).is(':checked')){ 
    $('#div').show(); 
    } else { 
    $('#div').hide(); 
    } 
}); 

此外，可以觸發該事件在頁面加載時，如果該複選框未選中那麼div會消失。

// Show the div only if the checkbox is checked 
function toggleDiv(){ 
    if($(this).is(':checked')){ 
    $('#div').show(); 
    } else { 
    $('#div').hide(); 
    } 
} 

$(document).onload(function(){ 

    // Set change event to hide/show the div 
    $('#UseUsername') 
    .change(toggleDiv) 
    .trigger('change'); 
}); 

Answer 2

一個非常簡單的方法是這樣的：

$('#UseUsername').change(function(){ 
    $('#div').toggle(this.checked); // show if it is checked, otherwise hide 
}); 

試試：http://jsfiddle.net/mHNuN/