Сначала о некоторых недочётах в вашем коде.
Насколько я понимаю, если элементы единичны, стоит использовать id, если их много однотипных — тогда class. Остальное в комментариях.
function t14() {
let i14 = document.querySelector('.i-14').value; // несколько элементов получаем при помощи querySelectorAll, а value будем получать уже от каждого элемента
let out14 = document.querySelector('.out-14');
let i = 0
let newStr = ''
while (i <= i14) { // сравнивать нужно с i14.length, и вместо <= нужно <, т.к. длина всегда больше номера последнего элемента
if (i14[i].checked) {
newStr += i14[i] // вот тут нужно использовать .value
i++ // это увеличение должно происходить вне зависимости от условия
}
}
out14.innerHTML = newStr
}
document.querySelector('.b-14').onclick = t14;
Попробуем исправить:
function t14() {
let i14 = document.querySelectorAll('input.i-14');
let out14 = document.querySelector('#out-14');
let i = 0;
let newStr = '';
while (i < i14.length) {
if (i14[i].checked) {
newStr += i14[i].value;
}
i++;
}
out14.innerHTML = newStr;
}
document.querySelector('#b-14').onclick = t14;
<input type="checkbox" id="one" class="i-14" value="one">
<label for="one">one</label><br>
<input type="checkbox" id="two" class="i-14" value="two">
<label for="two">two</label><br>
<input type="checkbox" id="three" class="i-14" value="three">
<label for="three">three</label><br>
<button id="b-14">click</button><br>
<div id="out-14"></div>