Checkbox - Display content according to active option (clicked)

Question

I’m trying to display certain content according to the selected checkbox, until this step everything ok, I managed to get the content to be displayed.

Now comes the second part which is where I am picking up miserably, which is to make the selected item have a border to mark as selected, I made a class, especially for such, called "edge" which should be activated according to the selected item, but the marking is not happening as it should.

Item is not being checked and items already clicked are not hiding after clicking another select option.

I am creating the events with the option "onclick", follows below the code:

    
   
   function itemSelect(elem) {
        $('.closed').hide();
        var si = $(elem).val();
        switch (si) {
            case '1':
                $('.item-1').fadeIn();
                $('#1').addClass('borda');
                break;
            case '2':
                $('.item-2').fadeIn();
                $('#2').addClass('borda');
                break;
            case '3':
                $('.item-3').fadeIn();
                $('#3').addClass('borda');
                break;
            case '4':
                $('.item-4').fadeIn();
                $('#4').addClass('borda');
                break;
            
        }
    }

.borda {
        border: 1px solid red;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .closed {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <label>Opção 1</label>
  <input type="checkbox" name="1" id="1" value="1" onclick="return itemSelect(this)"/><br>
  <label>Opção 2</label>
  <input type="checkbox" name="1" id="2" value="2" onclick="return itemSelect(this)"/><br>
  <label>Opção 3</label>
  <input type="checkbox" name="1" id="3" value="3" onclick="return itemSelect(this)"/><br>
  <label>Opção 4</label>
  <input type="checkbox" name="1" id="4" value="4" onclick="return itemSelect(this)"/>
</form>
 
<div class="item-1 closed " style="display:none">Item 1</div>
<div class="item-2 closed " style="display:none">Item 2</div>
<div class="item-3 closed " style="display:none">Item 3</div>
<div class="item-4 closed " style="display:none">Item 4</div>