<form method="POST" >
<div class="block">
<label for="id_test_5"></label> 
<input type="radio" name="test" id="id_test_5" value="5" /> 

<label for="id_test_4"></label> 
<input type="radio" name="test" id="id_test_4" value="4" /> 

  <label for="id_test_3"></label> 
<input type="radio" name="test" id="id_test_3" value="3" /> 

  
  <label for="id_test_2"></label> 
<input type="radio" name="test" id="id_test_2" value="2" checked/> 

  
 <label for="id_test_1"></label> 
<input type="radio" name="test" id="id_test_1" value="1" /> 

</div>
</form>

.block{
 display:flex;
 justify-content: center; 
}
.block input{
 display:none;
}
label{
  height: 100px;
  width: 100px;
   background-color:rgba(255, 0, 0, 0);
  margin:10px;
 position: relative;
}

label:after{
  content:"";
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  position: relative;
  background: #878787;
}

 

function reft(way, type, number, now){
number--;
var color = $(way).css(type);
var num_array = color.match(/(\d+)/g);
if(num_array[4]){num_array[4] = parseFloat("0."+num_array[4]); } else {num_array[4] = parseFloat("0."+1); } 
for (var i = 0; i <= number; i++) {
$(way+':eq('+i+')').css(type, 'rgba('+num_array[0]+','+num_array[1]+','+num_array[2]+', '+num_array[4]*i+')'); 
}   
$(now).nextAll(way).css(type, ''); 
}

$(".block input").change(function() {
if(this.checked) {  
var ryt = $(this).prevAll('label').length; 
reft(".block label", "background-color", ryt, this)
}  
})
.change();