Customize CheckBox in ASP.NET

Download source - 5.42 KB

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