Build a dependence in the behavior of multiple checkboxes and input fields

I have a set of checkboxes for some fruits and vegetables. And I need to write such a function that when at least one of the fruits is selected, the fruit input field appears and does not disappear as long as at least one fruit is selected. When all checkboxes from the fruit are unchecked, the input field should disappear. And the same thing with vegetables. But I'm confused and can't figure out how to do it better. I would be grateful for your help.

<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() {}