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

Question

如何检查id UseUsername id的复选框是否已被选中，然后使用该信息切换div {{1}}的另一个元素？

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/