Professional Linux Support, Hosting & Security
Services Empowering Businesses Worldwide

Friday, 9 October 2009

jQuery plugin : imageTickBox - Change any input checkbox to an image version

This is a small unobtrusive JQuery plugin function which allows you to change any input checkbox to an image version while retaining full functionality! It even pre-loads the images to keep it snappy.

Demo

Example 1
Example 2
Example 3
Example 4

Download

jquery.imageTickBox.js.zip

Options

  • "tickedImage" - Image to be used when ticked
  • "unTickedImage" - Image to be used when unticked
  • "imageClass" - CSS Class to apply to the images.

Usage

  1. Download/Extract JQuery
  2. Download/Extract our plugin
  3. Include jquery and the plugin in your page with; 
    <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imageTickBox.js">
  4. Include a jQuery selector function call. E.g. to apply this to all tickboxes on the page use; 
    jQuery(document).ready(function(){

jQuery("input:[type=checkbox]").imageTickBox({
tickedImage: "/images/checkbox_tick.png",
unTickedImage: "/images/checkbox_notick.png",
imageClass: "tickbox"
});

});

License

LGPL

Change Log

v1.0 - First Version

jQuery Plugins Project Page

http://plugins.jquery.com/project/ImageTickBox

Donate

Here is a paypal link for if you find this useful and would like to buy me a drink!

Posted by Leenix at 01:48
Labels: , , ,
Reactions: 

9 comments:

  1. I'm trying to user the script, it worked if I click on the checkbox, but how do I make it work if I have a checked all button ? the images doesnt change after I set the .checked to true.
    ReplyDelete
  2. Hello Jemison.

    Basically you need to call the click function on all of the checkbox images.

    Add the following to a js file and include it;

    function selectAll() {
    jQuery("img[id*='tickboxImage']").each( function () { jQuery(this).click(); });
    }

    Then add your select all link or button and put onclick='selectAll();' in the tag.

    Done... Hope that helps
    ReplyDelete
  3. it useful and small script but what if i want to multiple instantiate on same page it doesn't work..
    ReplyDelete
  4. Thx for the feedback Mungiu.

    I'll look to address that in the next version.
    ReplyDelete
  5. I was so excited when I finally found a plugin that allowed me to use my own images, and it worked... Except it took over my click event, which no longer works in any of the checkboxes. The functions I had assigned to the click event in the control no longer fire. Any advice?
    ReplyDelete
  6. Earlier I submitted a comment indicating that your function intercepted the click event, thus nullifying my own click events on certain boxes. I am just writing to let you know I fixed the problem. I replaced part of your code, and it works like a charm now. Here is the change:


    if (jQuery(this).next().attr("checked")) {
    jQuery(this).attr("src", settings.unTickedImage);
    // jQuery(this).next().removeAttr("checked");
    } else {
    jQuery(this).attr("src", settings.tickedImage);
    // jQuery(this).next().attr("checked", "checked");
    }
    jQuery(this).next().click();
    ReplyDelete
  7. Jorge: Thanks for the feedback and contribution
    ReplyDelete
  8. Hi,

    How can I check and checkbox in a function programmically?

    Ie, I have a checkbox

    <%input% id="SelectAreas" type="checkbox"/>
    (i had to put %% around input as it wouldnt allow me enter html code)

    i want to click/unclick it in a function
    I have tried things like:
    jQuery('SelectAreas').click();
    $('#SelectAreas').click();
    Etc
    ReplyDelete
  9. Hi Michael,

    My gut is that the script wont do it without some TLC.

    You could try some of the solutions listed here, but you may still need to tweak the script;

    http://blog.leenix.co.uk/2009/10/jquery-plugin-imagetickbox-change-any.html

    Please share what you learn!
    ReplyDelete

Subscribe to: Post Comments (Atom)