CODEWITHSUNDEEP
jqueryhtmlcss
ohiock
ohiock

Reputation: 646

jQuery - Style checkbox, replace with image

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.

Upvotes: 5

Views: 11452

Answers (4)

Lance Larsen - Microsoft MVP
Lance Larsen - Microsoft MVP

Reputation: 1184

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

Upvotes: 0

Tillito
Tillito

Reputation: 7858

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

Upvotes: 0

Stefan Gabos
Stefan Gabos

Reputation: 1471

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.

Upvotes: 0

ohiock
ohiock

Reputation: 646

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.

Upvotes: 2

Related Questions