I’m having trouble using radio input to do other things

Question

My idea and the next one, I think if you do this kind of validation with js will get heavier since you will have to send more code and perform more process! This validation is not so important then not the need. That idea is convenient or very wrong?

.seletor{
  width: 160px;
  height: 60px;
  margin-bottom: 10px;
  background-color: #9b9b9b;
}

#r1:checked .seletor:first-child{
  background-color: orange;
}
#r2:checked .seletor:nth-child(2){
  background-color: purple;
}
#r3:checked .seletor:nth-child(3){
  background-color: yellow;
}

<input type="radio" name="c_1" id="r1">
<input type="radio" name="c_1" id="r2">
<input type="radio" name="c_1" id="r3">

<label for="r1">
  <div class="seletor">ooo</div>
</label>
<label for="r2">
  <div class="seletor">ooo</div>
</label>
<label for="r3">
  <div class="seletor">ooo</div>
</label>

Answer 1

AKU as I mentioned above in the comment of your question, if the use of color is only for user experience, to guide you in some sense and do not need validation in the bank there is no reason to worry about it.

About changing the color with the RadioButton my solution was to use the adjacent selectors and attr[] to get into the div and change the color, see below the CSS so you understand better and see working. Basically just added the line:

#r1:checked ~ label[for="r1"] > div.seletor {}

.seletor{
  width: 160px;
  height: 60px;
  margin-bottom: 10px;
  background-color: #9b9b9b;
  cursor: pointer;
}
input[type="radio"] {
  cursor: pointer;
}
#r1:checked ~ label[for="r1"] > div.seletor{
  background-color: orange;
}
#r2:checked ~ label[for="r2"] > div.seletor{
  background-color: purple;
}
#r3:checked ~ label[for="r3"] > div.seletor{
  background-color: yellow;
}

<input type="radio" name="c_1" id="r1">
<input type="radio" name="c_1" id="r2">
<input type="radio" name="c_1" id="r3">

<label for="r1">
  <div class="seletor">ooo</div>
</label>
<label for="r2">
  <div class="seletor">ooo</div>
</label>
<label for="r3">
  <div class="seletor">ooo</div>
</label>