Постройте зависимость в поведении нескольких флажков и полей ввода - PullRequest
Новая
       38

Постройте зависимость в поведении нескольких флажков и полей ввода

1 голос
/ 06 августа 2020

У меня есть набор флажков для некоторых фруктов и овощей. И мне нужно написать такую ​​функцию, чтобы при выборе хотя бы одного из фруктов поле ввода фруктов появлялось и не исчезало, пока выбран хотя бы один фрукт. Когда все флажки у фруктов сняты, поле ввода должно исчезнуть. То же самое и с овощами. Но я сбит с толку и не могу понять, как это сделать лучше. Буду признателен за помощь. 

<div>
    <input type="checkbox" id="apple" class="custom-checkbox" autocomplete="off" onchange="showInput()">
    <label for="apple">apple</label>
</div>
<div>
    <input type="checkbox" id="banana"  class="custom-checkbox" autocomplete="off" onchange="showInput()">
    <label for="banana">banana</label>
</div>
<div>
    <input type="checkbox" id="mangoe"  class="custom-checkbox" autocomplete="off" onchange="showInput()">
    <label for="mangoe">mangoe</label>
</div>

<div>
    <input type="checkbox" id="potato"  class="custom-checkbox" autocomplete="off" onchange="showInput()">
    <label for="potato">potato</label>
</div>

<div>
    <input type="checkbox" id="celery"  class="custom-checkbox" autocomplete="off" onchange="showInput()">
    <label for="celery">celery</label>
</div>

<input type="text" id="fruits" name="fruits">
<input type="text" id="vegetables" name="vegetables">


function showInput() {}

1 Ответ

1 голос
/ 06 августа 2020

Посмотрите этот код: 

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body>
    <div>
        <input type="checkbox" id="apple" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
        <label for="apple">apple</label>
    </div>
    <div>
        <input type="checkbox" id="banana"  class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
        <label for="banana">banana</label>
    </div>
    <div>
        <input type="checkbox" id="mangoe"  class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
        <label for="mangoe">mangoe</label>
    </div>

    <div>
        <input type="checkbox" id="potato"  class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
        <label for="potato">potato</label>
    </div>

    <div>
        <input type="checkbox" id="celery"  class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
        <label for="celery">celery</label>
    </div>

    <input type="text" id="text_fruits" name="fruits" disabled>
    <input type="text" id="text_vegetables" name="vegetables" disabled>
    <button onclick="myFunction()">Click me</button>
    <script>
        function showFruits() {
            var fruits_checklist = document.getElementsByClassName("fruits");
            var result = false;
            for (var i = 0; i < fruits_checklist.length; i++)
                result = result || fruits_checklist[i].checked;

            document.getElementById("text_fruits").disabled = !result;
        }

        function showVeggies() {
            var fruits_checklist = document.getElementsByClassName("vegetables");
            var result = false;
            for (var i = 0; i < fruits_checklist.length; i++)
                result = result || fruits_checklist[i].checked;

            document.getElementById("text_vegetables").disabled = !result;
        }
    </script> 
</body>
</html>

Я добавил класс fruits для всех фруктов и класс vegetables для всех овощей для групп. Переименованы текстовые поля, чтобы избежать дублирования. Я создал отдельные функции для отображения / скрытия фруктов и овощей.

...