jquery - 用图片替换复选框 asp.net

Question

这是我尝试过的，我认为这个问题是不言自明的。

使用 CSS:(这没有用，我做了一个 jsfiddle)

.star + label{
    background:url('image1.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.star:checked + label{
    background:url('image2.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

使用 jQuery(部分有效)

$('.star').replaceWith("<img src='image1.png' />");

$('.star').click(function () {
var $checkbox = $(this).prev(".star");
$checkbox.prop('checked', !$checkbox.prop('checked'));

    if ($checkbox.prop("checked")) {
        $image.attr("src", "image2.png");
    } else {
        $image.attr("src", "image1.png");
    }
})

JSFIDDLE:fiddle

这是我在 aspx 页面上的代码:

    <span>
        <asp:CheckBox ID="star1" CssClass="star" runat="server" />
        <asp:CheckBox ID="star2" CssClass="star" runat="server" />
        <asp:CheckBox ID="star3" CssClass="star" runat="server" />
        <asp:CheckBox ID="star4" CssClass="star" runat="server" />
        <asp:CheckBox ID="star5" CssClass="star" runat="server" />
    </span>

我做错了什么？我已经寻找了多种解决方案(这里有很多关于它的问题)但它们不处理它是 asp.NET 的情况。

Answer 1

从@Abdul 的回答和他对丢失的 $image 的评论开始，您的 jsfiddle 有几个错误。

这是一个working version (虽然正如我所说，图像没有出现 - 但通过开发工具查看 src 显示它正在改变)。

$(document).ready(function () {
     //write your code here
    $('.star').replaceWith("<img src='https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png' class='star'/>");

    $('.star').on("click", function () {
        var $checkbox = $(this);
        $checkbox.prop('checked', !$checkbox.prop('checked'));

        if ($checkbox.prop("checked")) {
            $checkbox.prop("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav.png");
        } else {
            $checkbox.prop("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png");
        }
    })
});

第一个错误是您使用 class='star' 获取所有元素并将它们替换为图像。但是图像没有 class='star' 属性...因此当它尝试绑定(bind)下一个语句时，没有要绑定(bind)的元素(因为您只是将它们全部替换了.

绑定(bind)本身的格式不正确(我相信这可能是一种旧的绑定(bind)方式)并且应该使用 .on("click", function() { ... }); 风格。

然后你在使用 $(this).prev('.star'); 而你真正想要的只是 $(this)。

最后，您尝试使用不存在的 $image - 但实际上您试图更改的是对象本身...所以您再次真正想要的是$(this)(您将其设置为 $checkbox)