Web Components @ The Schworak Site

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:

name, the field name to be passed when the form is submitted.
checked-img, the image to use when the checkbox is checked.
unchecked-img, the image to use when the checkbox is unchecked.
value, the value to pass when the form is submitted and the checkbox is checked.
checked, property flag to initialize the item as checked when first loaded.

Properties:

readonly, when this flag is set, the value cannot be changed but it will be passed though when the form is submitted.
disabled, when this flag is set, the value cannot be changed and WILL NOT be passed though when the form is submitted.

The Label:

The label portion of the checkbox is set by adding your text between the open/close tags

Events:

click, fires when the user clicks the element or if code trys to change the check state as long as it is not disabled or readonly.
change, fires when the check state is toggled.

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:

<style>
	schworak-checkbox.round
	{
		background-image:url(https://schworak.com/icon/64/unchecked.png);
	}
	schworak-checkbox.round[checked]
	{
		background-image:url(https://schworak.com/icon/64/checked.png);
	}
</style>

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