JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <!-- Content here -->
</div>

<label>
  One
  <input type="checkbox" name="content" value="one" />
</label>

<label>
  Two
  <input type="checkbox" name="content" value="two" />
</label>

<label>
  Three
  <input type="checkbox" name="content" value="three" />
</label>

CSS

label {
  display: block;
}

JavaScript

const contents = {
	one: 'Content one',
  two: 'Content two',
  three: 'Content three'
}

function onUpdateContent(e) {
	// Обновление только одного последнего чекбокса
  const el = document.getElementById('content');
  const value = e.target.value;
  
  if (contents.hasOwnProperty(value)) {
  	el.innerHTML = contents[value];
  }
}

const selectors = document.querySelectorAll('[name=content]');

console.log(selectors);

selectors.forEach(
	(element) => {
  	element.addEventListener('change', onUpdateContent)
  }
)