1

我将图像用作单选按钮，并希望将 CSS 样式添加到通过 jQuery 检查的单选按钮（图像）。

这是具有单选按钮和标签的 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 示例

4

1 回答 1

4

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

$("#solidcolor input[type='radio']:checked").each( 
    function() { 
       $("#solidcolor label[for='" + this.id + "']").css("border", "solid 3px black");
    } 
);
于 2012-08-08T23:54:30.863 回答