CheckBox Values In HTML

I'm trying to create a site settings page with some checkboxes. If the checkbox is 'ON' a HTML element has a certain value, else it would be something else. But for some reason every checkbox keeps returning the value "on" in JavaScript. Please help. My HTML:

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

My JavaScript:

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').value;

  if (valueOfCheckBox == 'on') {
  document.getElementById('TXT').innerHTML = 'ON';
  } else { 
  document.getElementById('TXT').innerHTML += 'OFF';
  }
}