Форум

mmn · #1 (**permalink**) 14.10.2022, 07:14

Подскажите пожалуйста как изменить код чтоб при отметке 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, 07:45

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>

mmn · #3 (**permalink**) 14.10.2022, 09:16

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

Форум

Справочник

Discord чат

Курсы javascript