SO-65765556

by David Thomas

HTML

<p id='txt'></p>
<button id="btn" type="button">Click</button>
<label>
  <input type="checkbox" class="ckb" value="1">one
</label>
<label>
  <input type="checkbox" class="ckb" value="2">two 
</label>
<label>
  <input type="checkbox" class="ckb" value="3">three
</label>

CSS

*, ::before, ::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

#txt::before {
  content: 'Checked items: '
}

#txt:empty::before {
  color: #999;
  content: 'No items checked.';
}

JavaScript

const button = document.getElementById('btn');

button.addEventListener('click', (e) => {
	let checked = document.querySelectorAll('.ckb:checked'),
  		output = document.querySelector('#txt');
  output.textContent = Array.from(checked).map(
  	(el) => el.value
  ).join(', ') + '. ';
});