jQuery - Style checkbox, replace with image

Question

I need this script to hide my checkboxes and put an image of a styled checkbox in place of it. It is properly hiding it and showing the default image, but it will not update the checkbox to checked or unchecked once I click on it, nor will it update the image. I'm assuming it's a simple thing I am overlooking, I'm still new to jQuery.

Here is the script:

        $(".check").each(function() {
            $(this).hide();

            var $image = $("<img src='assets/images/layout/checkbox/unchecked.png' />").insertAfter(this);    

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

                if($checkbox.prop("checked")) {
                    $image.attr("src", "assets/images/layout/checkbox/checked.png");
                } else {
                    $image.attr("src", "assets/images/layout/checkbox/unchecked.png");
                }
            })
        });

Here is the HTML:

<input type="checkbox" class="check" />

Edit: Also, is this generally the best approach to styling checkboxes? I can't seem to find anything that is much easier than this, so any suggestions are appreciated.

BTW: $('.check') == $('input[type=checkbox]'), so no need to set classes for jQuery. — feeela
– feeela, Commented Jun 25, 2012 at 16:07
I've removed all of the other jQuery scripts on the page and it's still not working, any ideas as to what I could be doing wrong? — ohiock
– ohiock, Commented Jun 25, 2012 at 16:12
A classic solution: ryanfait.com/resources/custom-checkboxes-and-radio-buttons — biziclop
– biziclop, Commented Jun 25, 2012 at 18:05
you were missing a semicolon after the closed parentheses (2nd from the bottom) — StrikeForceZero
– StrikeForceZero, Commented Mar 4, 2013 at 16:52

ohiock · Accepted Answer · 2012-07-14 16:04:31Z

2

It turns out I was using a dated version of jQuery, which was the problem. I updated to 1.7.2 and everything worked as it should.

answered Jul 14, 2012 at 16:04

ohiock

6463 gold badges7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ohiock Over a year ago

Source code works as it looks here. The version that worked was 1.7.2, but I don't know what it was at prior to that.

Stefan Gabos · Accepted Answer · 2012-07-21 14:32:23Z

0

you could also use this jQuery plugin called Zebra_Transform which transforms all the check boxes, radio buttons and select boxes on a page, it is very very small (3KB), and works in all major browsers.

answered Jul 21, 2012 at 14:32

Stefan Gabos

1,48115 silver badges17 bronze badges

Comments

Tillito · Accepted Answer · 2012-12-06 10:13:47Z

0

I tried several solutions and the best choice seems: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ It is simple and works well.

answered Dec 6, 2012 at 10:13

Tillito

7,9387 gold badges37 silver badges33 bronze badges

1 Comment

DeveloperChris Over a year ago

Sadly Ryan Fait has passed away and this page is no longer valid.

Lance Larsen - Microsoft MVP · Accepted Answer · 2015-10-20 21:53:23Z

Know this is an older thread -- but needed a solution to converting checkboxes to images -- and this was the best answer. :) So refactored it some and wanted to share.

function setCheckboxImageSrc(checkbox, image, checkedUrl, uncheckedUrl) {
    if (checkbox.is(":checked")) {
        image.attr("src", checkedUrl);
    } else {
        image.attr("src", uncheckedUrl);
    }
}

function setCheckboxImage(checkboxObj, className, checkedUrl, uncheckedUrl) {
    checkboxObj.hide();

    var $image = $("<img src='" + checkedUrl + "' />").insertAfter(checkboxObj);
    setCheckboxImageSrc(checkboxObj, $image, checkedUrl, uncheckedUrl);

    $image.click(function () {
        var $checkbox = $image.prev("." + className);
        $checkbox.click();
        setCheckboxImageSrc($checkbox, $image, checkedUrl, uncheckedUrl);
    });
}

$(".checkboxUp").each(function () {
    setCheckboxImage($(this), "checkboxUp", "../../../images/DirectionUpChecked.png", "../../../images/DirectionUpUnchecked.png");
});

$(".checkboxDown").each(function () {
    setCheckboxImage($(this), "checkboxDown", "../../../images/DirectionDownChecked.png", "../../../images/DirectionDownUnchecked.png");
});

Collectives™ on Stack Overflow

jQuery - Style checkbox, replace with image

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related