ASP.NET - Setting CssClass of a CheckBox


The following code

((CheckBox)e.Row.FindControl("exportCb")).CssClass = "enabledExport";

Creates html

<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_gridviewName__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:gridviewName:_ctl2:exportCb" /></span>

For the asp.net gridview column

<asp:TemplateField HeaderText="Export"> <ItemTemplate> <asp:CheckBox runat="server" ID="exportCb"/> </ItemTemplate> <ItemStyle/> </asp:TemplateField>

I need to use jquery


to check/uncheck (as a toggle) the checkboxes. Because the CssClass is marked on the <span> the code is going to try to toggle a <span> instead of the <input>. How can I fix this?

I don't mind if the solution is on jquery or asp.net side as long as it works. I'd love it if the code just marked the input like its supposed to...


If you're trying to show/hide the checkbox you could do this:

$('.enabledExport input:checkbox').toggle()

but what I think you're trying to do is:

var $checkbox = $('.enabledExport input:checkbox'); $checkbox.attr("checked", !$checkbox.is(":checked"));


The easiest solution is to design jQuery selector in such way, that it would select checkbox that is located as a child of span with class 'enabledExport'. In this case it would look like:

jQuery('.enabledCheckbox > :checkbox').toggle()


jQuery(':checkbox', '.enabledCheckbox').toggle()


You need to use the correct cssclass and prefix it with a dot. So you've selected your span. Then step into that span and select the checkbox. This is to bind the click event:

$(".enabledExport").click(function(){ var box = $(this).children(":checkbox"); box.is(":checked") ? box.removeAttr("checked") : box.attr("checked", "checked"); });

And this is clicking:



I am using a MasterSite page so the checkbox elements id is getting the ContentPlaceHolder information added to the checkbox id. When the page loads, I am assigning a custom attribute to help find the elements (can be done with a foreach statement also). Here is the custom attribute code behind:


protected void Page_Load(object sender, EventArgs e)


if (!IsPostBack) { chkTxa.Attributes.Add("clientID", "chkTxa"); chkTxx.Attributes.Add("clientID", "chkTxx"); }



My two checkbox IDs are: chkTxa and chkTxx. I set the AutoPostBack="False" because I want the client side to take care of the checkbox toggling. Since the checkbox is located within an html table, the browser is wrapping the checkbox in a tag. This requires you to do extra work to find the checkbox. The jQuery code is this:


$(document).ready(function () {

var chkTxa; var chkTxx; // dig into the <span> object to find the checkbox chkTxa = $("[clientID=chkTxa]").children(":checkbox"); chkTxx = $("[clientID=chkTxx]").children(":checkbox"); $(chkTxa).click(function () { if (!chkTxa.is(":checked")) { chkTxa.removeAttr("checked"); } else { chkTxx.removeAttr("checked"); } }); $(chkTxx).click(function () { if (!chkTxx.is(":checked")) { chkTxx.removeAttr("checked"); } else { chkTxa.removeAttr("checked"); } }); }); </blockquote>

Hopefully someone finds this useful.



$(".enabledExport+input").toggle() should do the trick.


  • How to change the gridview width and rename the header after binding data
  • DataGrid TemplateColumn - Triger an event when changes occured(asp:radiobuttonlist)
  • ASP GridView Refresh after Excel Export not working
  • Could not find the gcm.jar error when creating App Engine backend => suggests installing deprecat
  • Is there ever a reason to use is versus as? [duplicate]
  • Disable check for override in gcc
  • Integrate two requests into one Javascript
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Type mismatch: cannot convert from ListFragment to Fragment
  • UI-GRID column summation on checkbox change
  • Subversion reverting resolved file
  • replacing while loop with list comprehension
  • CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE
  • Primefaces ManyCheckbox inside ui:repeat calls setter method only for last loop
  • DIV instruction jumping to random location?
  • Ember.js model to be organised as a tree structure
  • Jackson Parser: ignore deserializing for type mismatch
  • Content-Length header not returned from Pylons response
  • Play WS (2.2.1): post/put large request
  • OpenGL ES texture problem, 4 duplicate columns and horizontal lines (Android)
  • How to access EntityManager inside Entity class in EJB3
  • Bug in WPF DataGrid
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Excel - Autoshape get it's name from cell (value)
  • TFS: Get latest causes slow project reloading
  • Check if a string to interpolate provides expected placeholders
  • Javascript Callbacks with Object constructor
  • ILMerge & Keep Assembly Name
  • vba code to select only visible cells in specific column except heading
  • How to make Safari send if-modified-since header?
  • Large data - storage and query
  • How can I estimate amount of memory left with calling System.gc()?
  • WOWZA + RTMP + HTML5 Playback?
  • GridView Sorting works once only
  • RestKit - RKRequestDelegate does not exist
  • Traverse Array and Display in markup
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?