jquery - 将 CSS 添加到 jQuery 中选中的单选按钮和标签

Question

我使用图像作为单选按钮，并希望向通过 jQuery 检查的单选按钮(图像)添加 CSS 样式。

这是具有单选按钮和标签的 HTMl 代码:

<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color0" value="aqua_solid"  checked='checked'>
<label for="box_background_color0"><img src="images/backgrounds/aqua.png"></label>
<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color1" value="blue_solid" >
<label for="box_background_color1"><img src="images/backgrounds/blue.png"></label>
<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color2" value="black_solid" >
<label for="box_background_color2"><img src="images/backgrounds/black.png"></label>

这是我用来使单选按钮作为图像工作的 jquery 代码:

$('#solidcolor input:radio').addClass('input_hidden');
$('#solidcolor label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

这很好用。您选择一个图像，它会检查隐藏的单选按钮并突出显示图像，以便您知道您做出了选择。然后我保存设置，效果很好。

我想知道的是，当页面重新加载时，我想向选中的单选按钮(图像标签)添加一个实心的 3px 黑色边框，以便您知道之前做出的选择。

当前发生的情况是，当您重新加载页面时，所有图像(标签)最终都会带有黑色边框。

这是我试图用来突出显示之前保存的单选按钮的 jQuery。

$("#solidcolor input[type='radio']:checked").each( 
function() { 
   $('#solidcolor label').css("border", "solid 3px black");
} 
);

这可以通过 jQuery 完成吗？或者我最好尝试通过 CSS 突出显示之前选择的单选按钮？

我还尝试了不同的 jQuery 函数，如果我使用此代码，它会提醒我之前正确选中的单选按钮，但是使用此代码，我不知道如何使用它来将 CSS 边框添加到该特定按钮标签或选中的单选按钮。

var isChecked = $("#solidcolor input[name=asw_options[box_background_color]]:checked").val();
 alert(isChecked);

请帮忙，我已经三天了。

谢谢

编辑:

我刚刚设置了一个 jsfiddle 来展示我的意思

jSFiddle Example

Answer 1

您可以尝试的一件事是更新 .each 回调。我向 label 选择器添加了一个属性选择器，以便获取与选中的复选框关联的标签

$("#solidcolor input[type='radio']:checked").each( 
    function() { 
       $("#solidcolor label[for='" + this.id + "']").css("border", "solid 3px black");
    } 
);