jquery
  • function
  • radio-button
  • checked
  • 2012-08-08 168 views 1 likes 
    1

    我使用圖像作爲單選按鈕,並希望將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 Example

    +0

    發表的jsfiddle關聯的標籤添加的屬性選擇器label選擇,它會更容易看到正在發生的事情。 – gcochard 2012-08-08 23:39:30

    +0

    好的,現在就設置好 – Jason 2012-08-08 23:41:15

    +0

    剛剛用jsFiddle示例代碼更新了問題。 – Jason 2012-08-09 00:00:04

    回答

    4

    有一兩件事你可以嘗試正在更新.each回調。我爲了得到與選中的複選框

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

    謝謝萬提姆。你是天賜之物。這很有效。 – Jason 2012-08-09 00:01:32

    +0

    很高興能幫到你! – 2012-08-09 00:11:41

    相關問題