如何使用复选框切换另一个元素? [英] How do I use a checkbox to toggle another element?

问题描述

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

How can I check if my checkbox with an id of UseUsername has been checked, and then use that information to toggle another element with an id of div?

推荐答案

就像这样简单:

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

此外，您可以在页面加载时触发此事件，因此，如果未选中此复选框，div将消失.

Additionally, you could fire this event when the page loads, so the div will disappear if the checkbox isn't checked.

// 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');
});

这篇关于如何使用复选框切换另一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！