mmn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
let div = document.querySelector(".check"),
artikul = document.getElementById('txttown'),
result = document.querySelector(".result");
div.addEventListener("change", function() {
let arr = Array.from(div.querySelectorAll(".protection:checked"),
({ value }) => value);
if (arr.length > 1) {
arr[arr.length - 2] += ` и ${arr.pop()}`
};
artikul.value = result.textContent = arr.length ? `Выбрано ${arr}` : '';
})
})
</script>
</head>
<body>
<div class="check">
<input type="checkbox" id="checkbox_1" class="protection checkbox" value="value 1">
<input type="checkbox" id="checkbox_2" class="protection checkbox" value="value 2">
<input type="checkbox" id="checkbox_3" class="protection checkbox" value="value 3">
<input type="checkbox" id="checkbox_4" class="protection checkbox" value="value 4">
<input type="checkbox" id="checkbox_5" class="protection checkbox" value="value 5">
</div>
<div>
<input type="text" id="txttown" class="form-control" name="txttown" size="50">
<div class="result"></div>
</div>
</body>
</html>