我使用圖像作爲單選按鈕,並希望將CSS樣式添加到通過jQuery檢查的單選按鈕(圖像)。將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關聯的標籤添加的屬性選擇器
label
選擇,它會更容易看到正在發生的事情。 – gcochard 2012-08-08 23:39:30好的,現在就設置好 – Jason 2012-08-08 23:41:15
剛剛用jsFiddle示例代碼更新了問題。 – Jason 2012-08-09 00:00:04