?
Solved

CheckBoxList add imagebutton to each item

Posted on 2011-04-24
2
Medium Priority
?
479 Views
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?
0
Comment
Question by:johnkainn
2 Comments
 
LVL 1

Accepted Solution

by:
idusty earned 1000 total points
ID: 35457530
Hi,

I stumbled on this very neat cross browser supported jquery solution, which does exactly what you want, I think. Take a look!
http://code.google.com/p/jquery-checkbox/

Alternatively there has been a similar need being discussed on StackOverflow:
http://stackoverflow.com/questions/2087550/simple-way-to-replace-check-boxes-with-images-in-jquery-without-using-plugins

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

<ul>
   <li><input type="checkbox" id="chk1" checked="checked"/> Check 01</li>
   <li><input type="checkbox" id="chk2"/> Check 02</li>
</ul>   
<script type="text/javascript">
    var imgOn='imgOn.png';
    var imgOff='imgOff.png';
    $(function(){
        $("input:checkbox").each(function(){            
    $(this).css("display","none");
    if($(this).is(":checked")){ 
        $(this).after($(document.createElement("img"))
        .attr({src:imgOn,title:'Checkbox',id:$(this).attr("id")})
            .addClass("chkBoxImg"));
    }else{
        $(this).after($(document.createElement("img"))
        .attr({src:imgOff, title:'Checkbox',id:$(this).attr("id")})
        .addClass("chkBoxImg"));
    }});
    $("img.chkBoxImg").click(function(){
        i= "input#"+$(this).attr("id")+":checkbox";
        alert($(i).attr("checked"));
        s=$(this).attr("src");
        if(s==imgOn){
            $(this).attr("src",imgOff);
        $(i).attr("checked",false);
        }else{
        $(this).attr("src",imgOn);
        $(i).attr("checked",true);
        }});
});
</script>

Open in new window

0
 
LVL 6

Assisted Solution

by:havj123
havj123 earned 1000 total points
ID: 35458168
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

864 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