Replace checkbox with image asp.net

Question

This is what I have tried, I think the question is self-explainatory.

Using CSS: (This did not work I did a 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;
}

Using jQuery (This worked partially)

$('.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

And this is my code on the aspx page:

    <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>

What could I be doing wrong? I have looked for multiple solutions (there are a lot of questions here about it) but they don't handle the case in which it is asp.NET.

Hello Joze, why the jQuery method worked partially? Whats is missing? — Kauê Gimenes
– Kauê Gimenes, Commented Apr 24, 2015 at 14:15
@KauêGimenes The uncheked image shows but on click nothing happens. The jQuery does not work on the .net project though. In the fiddle I tested making inputs, not exactly the same as the asp:checkboxes.... — Jose Luis
– Jose Luis, Commented Apr 24, 2015 at 14:16
Total guess (as I'm a newbie in jQuery), but if you're replacing the HTML element that has the class="star" with the image... then the next piece of code is not going to find any elements with class="star" to bind to? Try putting the class="star" as part of the <img> code you're using to replace — freefaller
– freefaller, Commented Apr 24, 2015 at 14:18
@freefaller no that's not it either. Though I will leave the class attribute on the img tag. I think that was still a mistake on my part. Thanks. — Jose Luis
– Jose Luis, Commented Apr 24, 2015 at 14:24
My next question was going to be what @Abdul has just answered... I thought the format was $(".star").on("click", function() { ... }); — freefaller
– freefaller, Commented Apr 24, 2015 at 14:25

freefaller · Accepted Answer · 2015-04-24 14:50:12Z

Leading on from the answer from @Abdul, and his comment about the missing $image, your jsfiddle has a couple of errors.

Here is a working version (although as I say, the images aren't appearing - but viewing the src through development tools shows it is changing).

$(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");
        }
    })
});

The first mistake was that you were taking all the elements with class='star' and replacing them with an image. But the image did not have the class='star' attribute... therefore when it tried to bind on the next statement, there were no elements to bind to (because you'd just replaced them all.

The binding itself was incorrectly formatted (I believe that might be an old style of binding) and should have been using the .on("click", function() { ... }); style.

Then you were using $(this).prev('.star'); when what you actually wanted was just $(this).

Finally you were then trying to use $image which didn't exist - but in fact it was the object itself that you were trying to change... so once again what you actually wanted was $(this) (which you'd set to $checkbox)

Abdul Ahmad · Accepted Answer · 2015-04-24 14:42:05Z

0

Heres a working demo for you

for jQuery, binding a .click event handler on dynamically generated content (in your case, the image) will not work. You need to use the following syntax:

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

although, even this has not worked for me in the past, and I had to do:

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

update

let's look at your code together real quick:

$(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");
    }
  })
});

the first thing you need to know is that you haven't declared an $image variable, which I did for you. The second thing is, the $image variable must be a jQuery object before you can call .attr on it. So you need to declare this $image object something like this:

var $image = $(this);

edited Apr 24, 2015 at 14:42

answered Apr 24, 2015 at 14:24

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

2 Comments

Jose Luis Over a year ago

This doesn't work either. check the fiddle I put on the question

freefaller Over a year ago

@Joze, your fiddle does not use the format that Abdul has given you. Also, the fiddle is not even showing the initial image, so it's pretty difficult to tell what's happening

codeandcloud · Accepted Answer · 2015-04-24 15:06:07Z

0

The answer is that ASP.NET framework do not render

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

like this.

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

Instead, it gets rendered as ( yet another ASP.NET discrepancy )

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

Change your click function keeping this DOM structure in mind to make the code work.

answered Apr 24, 2015 at 15:06

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Collectives™ on Stack Overflow

Replace checkbox with image asp.net

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related