The Schworak Site | Log In | Up A Level

Web Components > checkbox

This checkbox can be used in place of a standard checkbox in a form.

Include: schworak-checkbox.js

Usage: <schworak-checkbox name='checkbox_name' value='1'>label_text_here</schworak-checkbox>

Attributes: Properties: The Label: Events:

Example 1 - Checkbox mode:

When each checkbox has a unique name, they function as standard check boxes where each item can be switched on or off independantly. Elements marked as DISABLED or READONLY will be sligntly opaque by default but you can change that with CSS. Elements that are DISABLED will not pass values when the form is submitted, but those only marked READONLY will pass the values through.

  • Option One (disabled)
  • Option Two
  • Option Three
  • Option Four (readonly)
  • Option Five (disabled)

By default, the checkboxes use a line when unchecked and checkmark when checked. You can style your images by setting the the background-image of the control. In the sample above, we have applied custom cound checkbox images by applying a class to the tag and adding our own style as follows:


Example 2 - Radio mode:

When all checkbox have the same name, they function as radio boxes where only one can be switched on and all the rest are switched off within a form. If not in a form, they will be bound within the entire page. Unlike standard radio buttons, you can switch them all off.

In this example, we are using the default checkmark images, but we are applying a font size to each option to demonstrate that the contents of the tag, including the images, scale to be the same height as the font. It is assumed that you would use a square image for your checkbox.

  • Radio Zero
  • Radio One
  • Radio Two
  • Radio Three
  • Radio Four
  • Radio Five
  • Radio Six
  • Radio Seven
  • Radio Eight

All content on this site is copyright ©2004-2024 and is not to be reproduced without prior permission.