I'm trying to display certain content according to the selected checkbox, until this step everything ok, I was able to make the content appear.
Now comes the second part that is where I'm getting miserably, which is to make the selected item with a border to mark as selected, I made a class, especially for that, called "border" that should be activated accordingly with the selected item, but the marking is not happening as it should.
The Item is not being marked and the items that have already been clicked are not hiding after clicking another select option.
I'm creating events with the "onclick" option, 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ção1</label><inputtype="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>