65.9K
CodeProject is changing. Read more.
Home

Customize CheckBox in ASP.NET

starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.67/5 (5 votes)

Jul 2, 2008

CPOL
viewsIcon

59573

downloadIcon

1181

Customize checkbox control in ASP.NET

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.