SO-65765556

by David Thomas

HTML

<p id='txt'></p>
<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 inputs = document.querySelectorAll('.ckb'),
  output = () => {
    let results = document.querySelector('#txt'),
      checked = Array.from(inputs).filter(
        (el) => el.checked
      );

    results.textContent = checked.length === 0 ? '' : checked.map(
      (el) => el.value
    ).join(', ') + '. ';
  };

inputs.forEach(
  (el) => el.addEventListener('change', output)
);