How to leave checked option when clicking div

Question

There is a website where the customer should choose a cor and tamanho for certain product, what I have today are Divs that show colors and sizes but I’m not able to leave the option marcada when selected, as radios. I need the values for a check when they are not marked.

The css are these:

.tovar_color_select {padding-bottom:19px;}
.tovar_color_select p {
    margin-bottom:13px;
    text-transform:uppercase;
    font-weight:900;
    font-size:12px;
    color:#333;
}
.tovar_color_select a {
    position:relative;
    display:inline-block;
    margin-right:10px;
    width:32px;
    height:22px;
}

.tovar_color_select a:before {
    content:'';
    position:absolute;
    left:-4px;
    top:-4px;
    right:-4px;
    bottom:-4px;
    border:1px solid #e9e9e9;
    transition: all 0.1s ease-in-out; 
    -webkit-transition: all 0.1s ease-in-out;
}
.tovar_color_select a:hover:before,
.tovar_color_select a.active:before {
    border:2px solid #333;
}

.tovar_size_select {padding-bottom:25px;}
.tovar_size_select p {
    margin-bottom:9px;
    text-transform:uppercase;
    font-weight:900;
    font-size:12px;
    color:#333;
}
.tovar_size_select span {
    float:right;
    display:block;
    line-height:18px;
    font-size:12px;
    color:#666;
}
.tovar_size_select a {
    display:inline-block;
    width:40px;
    height:30px;
    margin:0 1px 5px;
    text-align:center;
    line-height:28px;
    font-size:11px;
    color:#666;
    border:1px solid #e9e9e9;
    transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out;
}
.tovar_size_select a:hover,
.tovar_size_select a.active {
    line-height:26px;
    color:#333;
    border:2px solid #333;
}

What I got so far is this:

<div class="tovar_color_select">
  <p>SELECIONE A COR</p>
  <?php foreach($ResCor as $ProdCor) { ?>
    <a IdCor="<?php echo $ProdCor->IdCor; ?>" style="background-color:<?php echo $ProdCor->Cor ?>;"  ></a>
  <?php } ?>

</div>

<div class="tovar_size_select">
  <div class="clearfix">
    <p class="pull-left">SELECIONE O TAMANHO</p>									
  </div>
  <?php foreach($ResTamanho  as $ProdTam) { ?>
    <a IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>
  <?php } ?>
</div>

What I’m trying to do is what’s on this link: Model

This is my website: Website

Answer 1

You can take the id for example of div that was clicked to use its value.

$(document).ready(function(){
    $(".divs").on("click", function(){          // pega click na div
      $(".divs").each(function(){               // para cada div
        $(this).removeClass("selecionado");     // remove a classe selecionada
      })
      $(this).addClass("selecionado");          // adicona a classe no click
      console.log($(this).prop("id"));          // mostra a div selecionada
    })      
})

#div-pai{
  width: 150px;
  display: flex;
  justify-content: space-between;
}
.divs{
  width: 25px;
  height: 25px;
  cursor: pointer;
}
#amarela{
  background-color: yellow;
}
#vermelha{
  background-color: red;
}
#azul{
  background-color: blue;
}
.selecionado{
  border: solid 3px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div-pai">
  <div class="divs" id="amarela"></div>
  <div class="divs" id="vermelha"></div>
  <div class="divs" id="azul"></div>
</div>

Answer 2

First create a class in each <a>:

<a class='tamanho' IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>

Then create a js code:

$('.tamanho').on('click', function () { 
   $('.tamanho').each(function() {
      $(this).removeClass('selecionado');
   });
   $(this).addClass('selecionado');
});

Then you create a 'selected' class in css and apply the edge or style you want