如何使用复选框切换另一个元素？

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/