Click here to Skip to main content
Click here to Skip to main content
Go to top

ASP.NET TriState CheckBox Made Easy

, 23 Aug 2007
Rate this:
Please Sign up or sign in to vote.
ASP.NET tri-state checkboxes using C# and JavaScript.


Tri-state checkboxes can be very helpful to implement custom functionality to provide three different options to choose in a single control. For example, you may want to implement a security control panel UI to set permissions for a collection of users, and the possible status for these permissions may be: "Allow", "Denied", "Unset".


A few days ago, I was asked to construct a tristate checkbox Web Control. My first approach was to do it by means of a Web Control class that inherits from the CheckBox class. I found this approach a little boring, so I decided to try another approach, by means of JavaScript and images that represent these three conditions (states). In this article, I will use a simple enough approach, preserving the principle of reusability of code by means of building a Web Control class.

Using the Code

  1. Make a new Web Control class to contain our tri-state checkbox control. You may use Visual Studio 2005 to create the new Class Library of Web Controls. A default "Class1.cs" will appear in the Solution Explorer. Change the name of the class to some other more relevant name. Remember to inherit the WebControl class in your new class. Also add the references needed.
  2. Create the class properties for: DefaultState, DefaultAction, ImagePath, Name, and CheckBoxstyle. Implement the images and state values containers for the three states of the checkbox. I did this part using "span" containers to store state values and <img> tags to allocate the state image.
  3. Implement the JavaScript to handle client the OnClick events of our tri-state checkboxes and embed this script in a C# function called Build().
  4. Write code for rendering the control as an image and two <span> tags: one for the state value and the other for the checkbox custom action.
  5. Write code for the OnLoad event for the Web Control to write the JavaScript we talked about earlier.
  6. Build the Solution.
public class TriStateCheckBox : WebControl
    // Member variables
    string _DefaultState = "1";
    string _DefaultAction = "1";
    string _name = string.Empty;
    string _imagespath = "images/";
    CheckBoxTableStyle _CheckBoxStyle = CheckBoxTableStyle.classic;

    // Public properties
    public string DefaultState
        get { return _DefaultState; }
        set { _DefaultState = value; }

    public string DefaultAction
        get { return _DefaultAction; }
        set { _DefaultAction = value; }

    public string Name
        get { return _name; }
        set { _name = value; }

    public string ImagePath
        get { return _imagespath; }
        set { _imagespath = value; }

    // Behavior
    public enum CheckBoxTableStyle

    public CheckBoxTableStyle CheckBoxStyle
        get { return _CheckBoxStyle; }
        set { _CheckBoxStyle = value; }

    private string Build()
        string script = "<script>";
        script += "function settristate(obj)";
        script += "{";
        script += "var temp='';";
        script += "var _obj=document.getElementById('value_'+obj);";
        script += "temp = _obj.innerHTML;";
        script += "if(temp == '1')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "2.bmp/';";
        script += "document.getElementById('value_'+obj).innerHTML = '2';";
        script += "}";
        script += "if(temp == '2')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "3.bmp';";
        script += "document.getElementById('value_'+obj).innerHTML = '3';";
        script += "}";
        script += "if(temp == '3')";
        script += "{";
        script += "document.getElementById('tristate_'+obj).src = '" + 
                  ImagePath + "1.bmp';";
        script += "document.getElementById('value_'+obj).innerHTML = '1';";
        script += "}";
        script += "}";
        script += "function GetValues(obj){var ret = " + 
                  "document.getElementById('value_'+obj).innerHTML;return ret;}";
        script += "function GetActions(obj){var ret = " + 
                  "document.getElementById('accion_'+obj).innerHTML;return ret;}";
        script += "</script>";
        return script;

    // Render tristatecheckbox
    //value_x is the current value of the checkbox "x"
    //action_x is the custom action for checkbox "x"
    protected override void Render(HtmlTextWriter output)
        output.Write("<IMG id='tristate_" + Name + "' onclick=settristate('" + 
                     Name + "') src='" + ImagePath + _DefaultState + ".bmp'>");
        output.Write("<span id='value_" + Name + 
                     "' style='VISIBILITY: hidden' name='value_" + 
                     Name + "'>3</span>");
        output.Write("<span id='accion_" + Name + 
                     "' style='VISIBILITY: hidden' name='accion_" + 
                     Name + "'>" + DefaultAction + "</span>");

    protected override void OnLoad(EventArgs e)

As shown, tri-state checkboxes can be added into any ASPX page.

Screenshot - tristate2.jpg

Use the property tags to set the name of the TriStateCheckBox. Also, you can set (optional) the DefaultState and DefaultAction, and I hope to add in the near future an option to set the checkbox style.

Screenshot - tristate1.jpg


  • First build: August 22, 2007.


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


About the Author

Douglas Sequera
Architect DSC
Spain Spain
10 years experienced software architect.

Comments and Discussions

GeneralMy vote of 1 PinmemberCoolVini13-Feb-09 21:57 
GeneralDont use visibility:hidden, use display:none Pinmemberrobvon8-May-08 18:19 
GeneralImprovement PinmemberNinjaCross23-Aug-07 12:38 
GeneralRe: Improvement PinmemberDouglas Sequera23-Aug-07 13:28 
GeneralImprovement Pinmemberjustin bredenkamp28-Mar-08 2:04 

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.140926.1 | Last Updated 23 Aug 2007
Article Copyright 2007 by Douglas Sequera
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid