CheckBoxList add imagebutton to each item

Posted on 2011-04-24
Last Modified: 2012-05-11
I have a CheckBoxList. I would like to add an imagebutton to each item in the list. How can I do that?
Question by:johnkainn
    LVL 1

    Accepted Solution


    I stumbled on this very neat cross browser supported jquery solution, which does exactly what you want, I think. Take a look!

    Alternatively there has been a similar need being discussed on StackOverflow:

    Someone suggested the following:

    "You need two images imgOn and imgOff for checked and unchecked states of check box. This needs ID attribute on each checkbox to be set to modify it on clicking on the image."

       <li><input type="checkbox" id="chk1" checked="checked"/> Check 01</li>
       <li><input type="checkbox" id="chk2"/> Check 02</li>
    <script type="text/javascript">
        var imgOn='imgOn.png';
        var imgOff='imgOff.png';
            .attr({src:imgOff, title:'Checkbox',id:$(this).attr("id")})
            i= "input#"+$(this).attr("id")+":checkbox";

    Open in new window

    LVL 6

    Assisted Solution


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now