• 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!!

 You can unsubscribe in one click, and I will never share your email address.

About Whizzystack

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS

We are User Experience Consultant, Conversion Rate Optimization Specialist and expert in digital transformation. We help savvy marketers, product owners and UX advocates make the case that a useable, accessible and people-first experience is the best path to business success. All the while pursuing his not-so-hidden agenda. We also 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

What We Do

Software Development

Web Application Development

Mobile Application Development Web Portal Development

Ecommerce Development

Custom Software Development

Web Presence

UI/UX Development

Digital Marketing

Social Media Management

Search Engine Optimization

Online Reputation Management

Web Experience

UI/UX Prototyping

System Designing

Service Designing 

System Integration

Performance Optimization

Our Developers

Contact Whizzystack

USA :     +1(877)3685420

India:    +91(95)60641297


111, Pemberton Brown Mills Road,

Brown Mills, New Jersey, USA, 08015

Bouleward Walk, Habitapur, Noida, Uttar Pradesh, India, 20109