• Whizzystack Solutions

Using jQuery and CSS for Better check boxes


The first step is to set the structure of the HTML document that underlies it. We'll need a checkboxed form which we'll replace with their enhanced jQuery versions later.

Our type is kept by the key container feature-the # page div. Within it is an unordered list that includes a number of label elements identifying the checkbox. From a usability point of view, something positive is that clicking a mark will check / uncheck the corresponding checkbox (the attribute specified).

Note the attributes of the HTML5 info, defined on some labels. We use these to add the custom data in an HTML5 document to any name. In our case, the attributes will specify the text labels of the checkbox replacements' on / off states.

And here is the markup of our replacement checkboxes:

It will loop through the checkboxes when our plugin is called, and insert the HTML code that you can see above after each one, while hiding the original at the same time. The class checked specifies the styling (on or off state) of the replacement checkbox.


We use a single transparent background PNG picture to style the replacements to the checkbox. The top part of the picture is the condition tested (on) and the bottom-the off state. The width of the replacement checkbox grows with the word labels.

The.tzCheckBox span is placed as an inline-block that holds it on the same line as the surrounding text, thus allowing us to style its margin and padding properties as a block feature. It's also given a relative location, so we can use the sliding door technique and display the.tzCBPart range with the rest of the context.

Depending on whether we show the on or off condition, the.tzCPContent width is either aligned to the left or to the right, with the correct padding to maximize the size of its.tzCheckBox container.


We'll call our plugin tzCHeckbox. It will take a JavaScript object as its parameter, with a label attribute. This property is an array defining the on / off state text labels shown.

All changes to the replacement checkbox are propagated back to the original checkbox (which is hidden but still appears on the page). This also works the other way around, as the original checkbox may be modified in some circumstances (for example, when you click on a label element). This will trigger the change event and the replacement update.

It is necessary to retain the original checkboxes on the page, because this way submitting the form (with or without AJAX) will also give the appropriate values the user has selected.

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!

whizzystack logo

About Us


We build & support your own talented, trusted, full-time development team hosted out of Whizzystack’s headquarters in India. We also deliver world class product and software development services Read more


Our Developers

Contact Us

 New Jersey     








Subscribe to Our Blog

Sign up to receive email notifications when Whizzystack drops more knowledge.

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS