Como aplicar efeito com CSS ou JavaScript num botão de um grupo de botões quando ele for clicado

Front-end
#1

Pessoal estou com o seguinte problema, tenho radios na forma de botão para três opções: sei, não sei e pular, cada qual com sua imagem, porém quando clico para que fique checked ainda está sem algum efeito para destacar e a pessoa saber que aquela opção está marcada.

<div class="btn-group" data-toggle="buttons" >
	<label class="btn"
		style="background-image: url('img/sei.png'); width: 80px; height: 80px;" >
	<input type="radio" name="resposta0" id="idcerto0" value="CERTO"
	autocomplete="off" checked path="resposta" />
</label> <label class="btn "
	style="background-image: url('img/naosei.png'); width: 80px; height: 80px;">
	<input type="radio" name="resposta0" id="iderrado0" value="ERRADO"
	autocomplete="off" path="resposta" />
</label> <label class="btn "
	style="background-image: url('img/pular.png'); width: 80px; height: 80px;">
		<input type="radio" name="resposta0" id="idpulei0" value="PULAR"
		autocomplete="off" path="resposta" />
	</label>
</div>

tentei usar um script da seguinte forma:

<script>
if($("#idcerto0").is(":checked")){
	$("#idcerto0").parent().css('border', '2px solid white');
} if($("#iderrado0").is(":checked")){
	$("#iderrado0").parent().css('border', '2px solid white');
} if ($("#idpulei0").is(":checked")){
	$("#idpulei0").parent().css('border', '2px solid white');
}
</script>

Porém só mostra o destaque no botão certo que está checked por padrão, quando clico nos outros eles não ficam com a bora e o botão certo não some a borda. Como podem ver não tenho prática em javascript e jquery, se alguém puder me ajudar ficarei grato.

#2

Galera acabei de conseguir, não acho que foi feito da melhor forma, mas ta funcionando kkkk.

<script>

if($("#idcerto0").is(":checked")){
	$("#idcerto0").parent().css('background-color', 'rgba(0,255,127,0.5)');

}
       
        $("#certo0").click(function(){
        	$("#certo0").css('background-color', 'rgba(0,255,127,0.5)');
        	$("#errado0").css('background-color', '');
        	$("#pulei0").css('background-color', '');
        });
        $("#errado0").click(function(){
        	$("#certo0").css('background-color', '');
        	$("#errado0").css('background-color', 'rgba(255,0,0,0.5)');
        	$("#pulei0").css('background-color', '');
        });
        $("#pulei0").click(function(){
        	$("#certo0").css('background-color', '');
        	$("#errado0").css('background-color', '');
        	$("#pulei0").css('background-color', 'rgba(255,69,0,0.5)');
        });
   
        
        if($("#idcerto${i.count}").is(":checked")){
        	$("#idcerto${i.count}").parent().css('background-color', 'rgba(0,255,127,0.5)');

        }
               
                $("#certo${i.count}").click(function(){
                	$("#certo${i.count}").css('background-color', 'rgba(0,255,127,0.5)');
                	$("#errado${i.count}").css('background-color', '');
                	$("#pulei${i.count}").css('background-color', '');
                });
                $("#errado${i.count}").click(function(){
                	$("#certo${i.count}").css('background-color', '');
                	$("#errado${i.count}").css('background-color', 'rgba(255,0,0,0.5)');
                	$("#pulei${i.count}").css('background-color', '');
                });
                $("#pulei${i.count}").click(function(){
                	$("#certo${i.count}").css('background-color', '');
                	$("#errado${i.count}").css('background-color', '');
                	$("#pulei${i.count}").css('background-color', 'rgba(255,69,0,0.5)');
                });

</script>