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'属性...因此当它试图绑定到下一个语句时，没有要绑定的元素（因为你只是将它们全部替换掉了。

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

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

最后你尝试使用不存在的$image - 但实际上你正试图改变对象本身......所以你真正想要的是{{1} }（你设置为$(this)）

Answer 2

Heres a working demo for you

对于$(selector).bind(event, function)，在动态生成的内容（在您的情况下，图像）上绑定jQuery事件处理程序将不起作用。您需要使用以下语法：

.click

但是，即使这在过去对我来说也没有用，我必须这样做：

$('.star').on('click', function() { });

<强> 更新

让我们快速看看你的代码：

$(document).on('click', '.star', function() { });

你需要知道的第一件事是你还没有宣布$(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').click(function () { var $image = ''; var $checkbox = $(this).prev(".star"); $checkbox.prop('checked', !$checkbox.prop('checked')); if ($checkbox.prop("checked")) { $image.attr("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav.png"); } else { $image.attr("src", "https://cm.eid-bad.e-i.com/cmcee/fr/images/std/icofav_bleu.png"); } }) });变量，我为你做了。第二件事是，$image变量必须是jQuery对象才能在其上调用$image。所以你需要声明这个.attr对象：

$image

Answer 3

答案是ASP.NET框架不呈现

<asp:CheckBox ID="star1" CssClass="star" runat="server" />

像这样。

<input type="checkbox" id="star1" class="star" value="1" />

<击>
相反，它被渲染为（又一个ASP.NET差异）

<span class="star"> <input id="star1" type="checkbox" name="star1" /> </span>

更改您的点击功能，牢记这个DOM结构，使代码有效。

用图像asp.net替换复选框

3 个答案: