Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2022, 08:14
mmn mmn вне форума
Новичок на форуме
Отправить личное сообщение для mmn Посмотреть профиль Найти все сообщения от mmn
 
Регистрация: 14.10.2022
Сообщений: 2

Заполнение поля 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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2022, 08:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,591

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>

Последний раз редактировалось рони, 14.10.2022 в 09:11.
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2022, 10:16
mmn mmn вне форума
Новичок на форуме
Отправить личное сообщение для mmn Посмотреть профиль Найти все сообщения от mmn
 
Регистрация: 14.10.2022
Сообщений: 2

Огромное спасибо за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение поля input через console. Заплачу! Неумелый Работа 0 25.11.2015 16:26
4 чекбокса, как при выборе вставить значение через запятую espltd Элементы интерфейса 2 09.09.2015 10:07
Как изменить input type="text" через checkbox? VadimW Общие вопросы Javascript 3 01.08.2015 21:03
Значение переменной через запятую DDSSDD Серверные языки и технологии 41 16.10.2014 15:01
скрипт, выводящий значения checkbox в строку через запятую Pincher Javascript под браузер 12 05.10.2012 21:49