Click here to Skip to main content
Click here to Skip to main content

Customize CheckBox in ASP.NET

By , 4 Feb 2009
Rate this:
Please Sign up or sign in to vote.

Introduction

I was working on a project in which I need a customize checkbox. I wanted to use an image for checkbox. I Googled, but could not find a solution for customize checkbox for ASP.NET checkbox control. The idea is that I want to write a code which makes an ASP.NET checkbox control customizable without writing any code in checkbox control.

Background

There are many solutions and articles present on the net for customize checkbox. But all of them work in HTML control. For each checkbox, you need to set a JavaScript function.

Using the Code

I have created this code to work with checkboxlist control. It is very easy to implement, drag any number of checkboxes on the page. Rest of the work will done by JavaScript code.

View online demo.

In the body tag, call the setup() function:

<body onload="setup()">

function setup()
 {
 var inputs=document.getElementsByTagName ("input")
 for(var i = 0; i < inputs.length; i++)
 {
     switch(inputs[i].type)
     {
     case "checkbox":
     inputs[i].style.display="None";
         if(inputs[i].checked)
         {
         inputs[i].nextSibling.innerHTML="<img src=" + inputs[i].nextSibling.innerHTML;
         }
         else
            {
             inputs[i].nextSibling.innerHTML=
			"<img src="+ inputs[i].nextSibling.innerHTML;
             }
         inputs[i].nextSibling.onclick=function(){cbclick(this)}
         break; 
    } 
 }
 }  

Points of Interest

There is no need to write code in ASP.NET checkbox list control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ravinder007
Team Leader
India India
I am working in Microsoft technology since 2001. Love to write code in JavaScript, asp.net and Ajax. See my site at http://www.ravinderweb.com/

Comments and Discussions

 
GeneralMy vote of 1 PinmemberArun Patjosy9-Dec-12 20:10 
GeneralOnce it checked; it does not uncheck PinmemberMKakkar26-Aug-10 20:07 
GeneralOn click image event Pinmemberspoodygoon5-Feb-09 8:11 
QuestionWhat if nextSibling==null? PinmemberSimon Capewell2-Jul-08 3:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 5 Feb 2009
Article Copyright 2008 by Ravinder007
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid