1

我已按照此链接获取图像复选框

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 相同的颜色。

附上我的o/p

我该如何解决这个问题，或者我错过了什么？

在我的 HTML 我给

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

但它仍然适用于整个 SPAN。我不确定做错了什么！

4

2 回答 2

1

您必须为 设置，background-color而span不是checkbox。

例如，您可以这样做（for .purple）：

jQuery

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

JSFiddle

于 2013-05-21T06:28:02.877 回答
1

您可以使用一个类来了解背景颜色（例如绿色），在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-21T06:36:00.207 回答