複選框作爲圖像 - 背景顏色

http://jsfiddle.net/jtbowden/xP2Ns/。腳本和CSS完美地工作。

.checkbox, .radio { 
    width: 19px; 
    height: 20px; 
    padding: 0px; 
    background: url("http://i48.tinypic.com/raz13m.jpg"); 
    display: block; 
    clear: left; 
    float: left; 
}

我的問題想設置background-color如果用戶點擊複選框：

.green { 
    background-color: green; 
}

和背景色不看像我預期，正在尋找相同小提琴O/P 。

Attached my o/p

如何解決這個還是我錯過了什麼？

在我的HTML我給

<p> 
    <input type="checkbox" name="1" class="styled green" />(green) 
<p>

但它仍然是適用於整個跨度。我不確定做錯了什麼！

來源

2013-05-21 user2067567

事情是這樣的：http://jsfiddle.net/xP2Ns/1241/（綠色只適用於現在） –

您可以使用一個類來了解背景顏色（例如綠色），在DoCheck函數中，您可以檢查該類並添加一個包含背景的新類（例如greenchecked）。

您可以使用其他顏色相同的方法。

例子：

.greencheck { 
    background-color: green; 
} 

function doCheck() { 
    if ($(this).hasClass('checked')) { 
     $(this).removeClass('checked'); 
     if($(this).hasClass('green')){ 
      $(this).removeClass('greencheck'); 
     } 
     $(this).children().prop("checked", false); 
    } else { 
     $(this).addClass('checked'); 
     if($(this).hasClass('green')){ 
      $(this).addClass('greencheck'); 
     } 
     $(this).children().prop("checked", true); 
    }

這裏是工作提琴：http://jsfiddle.net/xP2Ns/1241/

來源

2013-05-21 06:36:00

我的更新問題。基本的HTML背景不適合我。任何想法造成它？ – user2067567

適合我的工作，你能提供一個jsfiddle這個問題嗎？ –

一些緩存問題現在修復！謝謝！ – user2067567

您必須將background-color設置爲span而不是checkbox。

例如，你可以這樣做（爲.purple）：

JQuery的

if($(this).hasClass("purple")){ 
    $(this).css("background-color", "green"); 
}

JSFiddle

來源

2013-05-21 06:28:02 Vucko

複選框作爲圖像 - 背景顏色

回答

相關問題