Заполнение поля input text при отметке checkbox через запятую
Подскажите пожалуйста как изменить код чтоб при отметке checkbox его значение передавалось в поле input text и result с добавлением текста "Выбрано" предлога "и" и запятой в зависимости от количества отмечанных checkbox?
При отметке одного checkbox: "Выбрано value 2" При отметке двух checkbox: "Выбрано value 1 и value 2" При отметке трех checkbox: "Выбрано value 2, value 3 и value 4" При отметке четырех checkbox: "Выбрано value 1, value 2, value 3 и value 4" и тд...
<div>
<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">
<div class="result"></div>
</div>
<script>
var chex = document.querySelectorAll(".protection"),
artikul = document.getElementById('txttown');
for(var i = 0; i<chex.length;i++) {
chex[i].onchange = function () {
this.checked ? artikul.value += this.value : artikul.value = artikul.value.replace(this.value,"") ;
}
}
</script>
|
checkbox checked value array
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>
|
Огромное спасибо за помощь!
|
| Часовой пояс GMT +3, время: 05:33. |