Estou tentando mudar a cor do texto do radio button ao perder a seleção. Ocorre que esses radio buttons estão em várias tabelas. A regra é a seguinte: A tela será carregada com alguns um radio button selecionado por tabela. Quando o cliente selecionar outro radio button, o texto desse deverá ficar da cor vermelha. Até aqui ok. O problema é quando voltar a seleção original, a cor desse deve voltar a ficar preta sem afetar o texto dos demais radio buttons. Segue o meu código:
<div id="div1">
<table class="table table-hover table-bordered">
<tbody>
<tr>
<td class="col-md-2"><input type="radio" name="ans" value="0"><label>Dog</label></td>
<td class="col-md-2"><input type="radio" name="ans" value="1" checked="checked"><label>Horse</label></td>
<td class="col-md-2"><input type="radio" name="ans" value="2"><label>Cat</label></td>
</tr>
</tbody>
</table>
</div>
<div id="div2">
<table class="table table-hover table-bordered">
<tbody>
<tr>
<td class="col-md-2"><input type="radio" name="ans2" value="3"><label>Bird</label></td>
<td class="col-md-2"><input type="radio" name="ans2" value="4"><label>Fish</label></td>
<td class="col-md-2"><input type="radio" name="ans2" value="5" checked="checked"><label>Frog</label></td>
</tr>
</tbody>
</table>
</div>
<div id="div3">
<table class="table table-hover table-bordered">
<tbody>
<tr>
<td class="col-md-2"><input type="radio" name="ans3" value="6" checked="checked"><label>Lion</label></td>
<td class="col-md-2"><input type="radio" name="ans3" value="7"><label>Panther</label></td>
<td class="col-md-2"><input type="radio" name="ans3" value="8"><label>Tiger</label></td>
</tr>
</tbody>
</table>
</div>
Jquery:
<script>
var arrayInputs = $('input:radio');
var arrayChecked = $('input:checked');
arrayInputs.change(function() {
var result = $.inArray(this, arrayChecked);
//$('label').css('color','#000');
if(result < 0)
$(this).next('label').css("color", "red");
});