jquery CheckBox - Exibir conteúdo de acordo com seleção

[Guga Alves 1]

Olá, estou tentando exibir determinado conteúdo de acordo com o checkbox selecionado, até esta etapa tudo ok, com a ajuda do Marcos, que me respondeu este tópico: clique aqui consegui fazer com que o conteúdo seja exibido.

Agora vem a segunda parte que é onde estou apanhando miseravelmente, que fazer com que o item selecionado fique com uma borda para mostrar que ele esta sendo selecionado, fiz um class, especialmente para tal chamada "borda", que deveria ser ativada de acordo com o item selecionado, porem a marcação não esta ocorrendo como deveria. A marcação não esta sendo exibida e o itens não estão ocultando. Estou criando com opção "onclick" abaixo o código:

HTML:

<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="2" id="2" value="2" onclick="return itemSelect(this)"/><br>
  <label>Opção 3</label>
  <input type="checkbox" name="3" id="3" value="3" onclick="return itemSelect(this)"/><br>
  <label>Opção 4</label>
  <input type="checkbox" name="4" id="4" value="4" onclick="return itemSelect(this)"/>
</form>
 
<div class="item-1" style="display:none">Item 1</div>
<div class="item-2" style="display:none">Item 2</div>
<div class="item-3" style="display:none">Item 3</div>
<div class="item-4" style="display:none">Item 4</div>

 

CSS:

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

JAVASCRIPT

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;
            
        }
    }

Podem identificar onde estou errando é se possível me ajudar a fazer esta joça funcionar?

Obrigado!

[wanderval 19]

O input do tipo checkbox, não trabalha muito bom com "border"no caso dele a propriedade "outline" tem o mesmo efeito

eu fiz uma alteração na sua lógica ve se é isso que queria:

 

ex: https://jsbin.com/zefimadiyo/edit?html,js,output

[Guga Alves 1]

22 horas atrás, wanderval disse:

O input do tipo checkbox, não trabalha muito bom com "border"no caso dele a propriedade "outline" tem o mesmo efeito

eu fiz uma alteração na sua lógica ve se é isso que queria:

 

ex: https://jsbin.com/zefimadiyo/edit?html,js,output

Wanderval. Obrigado pela resposta, isso é mais ou menos sim o que queria, porém o item que foi selecionado deve "sumir" quando for "descelecionado" ou  for selecionado outra opção, por isso usei switch.

[wanderval 19]

Bom Guga fiz uma pequena alteração no código me baseando na sua descrição, lembro também que deve apertar o botão "Run with JS" para que o script seja startado.

// inserido class "item-option"
<div class="item-1 item-option" style="display:none">Item 1</div>

criado método para que as opções sejam ocultadas quando o item for descelecionado ou selecionado

// metodo que oculta os itens resultado
function hiddenResultSelected() {
  $('.item-option').hide();
}

https://jsbin.com/sufotagoza/edit?html,js,output

[Guga Alves 1]

1 hora atrás, wanderval disse:

Bom Guga fiz uma pequena alteração no código me baseando na sua descrição, lembro também que deve apertar o botão "Run with JS" para que o script seja startado.

// inserido class "item-option"
<div class="item-1 item-option" style="display:none">Item 1</div>

criado método para que as opções sejam ocultadas quando o item for descelecionado ou selecionado

// metodo que oculta os itens resultado
function hiddenResultSelected() {
  $('.item-option').hide();
}

https://jsbin.com/sufotagoza/edit?html,js,output

Perfeito, obrigado por garantir minha nota :D. Espero poder retribuir a ajuda qualquer hora destas :D