我使用图像作为单选按钮,并希望向通过 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 来展示我的意思
最佳答案
您可以尝试的一件事是更新 .each
回调。我向 label
选择器添加了一个属性选择器,以便获取与选中的复选框关联的标签
$("#solidcolor input[type='radio']:checked").each(
function() {
$("#solidcolor label[for='" + this.id + "']").css("border", "solid 3px black");
}
);
关于jquery - 将 CSS 添加到 jQuery 中选中的单选按钮和标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11874773/