User Guide

Overview

The wijcheckbox widget is used to decorate a standard HTML checkbox element.

NOTE: Please check the version history for an outline of new features, improvements, and changes to the Wijmo widgets.

HTML Markup

The markup used to create a wijcheckbox widget should resemble one of the following:

<input type='checkbox'>

or

<input type='checkbox' id='checkbox1' /><label for='checkbox1'></label>

or

<label><input type='checkbox' /></label>

The following script initializes the wijcheckbox widget:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $(":input[type='checkbox']").wijcheckbox();
        });
    </script>

The third of the markup examples and the script featured here results in the following:

This is my checkbox label text.

Quick Start

This quick start helps you to create a Web page, add the wijcheckbox widget, and customize the appearance and behavior of the widget.

In Notepad, to create a new HTML page, add the following code and save the document with an .html extension.
```
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
```

To reference the latest dependencies from the CDN, see http://wijmo.com/downloads/#wijmo-cdn. Add them to your HTML page within the <head> tags. For example:

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
 
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>

Within the <body> tags, add markup like the following.

<label><h3>To do list:</h3>
<label><input type='checkbox'/>Create a web page.</label>
<label><input type='checkbox' />Reference dependencies.</label>
<label><input type='checkbox' />Add markup.</label>
<label><input type='checkbox' />Initialize widget.</label>
<label><input type='checkbox' />Save and view in a browser.</label>

The <input> element creates the widget, and its type option is set to 'checkbox', which we call in the jQuery script to initialize the widget. This markup adds a series of checkboxes and labels to your page.

Within the <head> tags, below the references, add the following script to initialize the jQuery widget.

<script type="text/javascript">
    $(document).ready(function () {
       $(":input[type='checkbox']").wijcheckbox();
    });
</script>

Save your HTML file and open it in a browser. The wijcheckbox widget appears like the following.

API

Options

checked

Causes the checkbox to appear with a checkmark.

Type: Boolean

Default: false

Code Example:

$(":input[type='checkbox']").wijcheckbox({
   	checked: true
});

disabled

Causes the checkbox to appear in a disabled state. This state is marked by muted coloring and by no response to clicking.

Type: Boolean

Default: false

Code Example:

$(":input[type='checkbox']").wijcheckbox({
	disabled: true
});

Methods

destroy

Remove the functionality completely. This returns the element to its pre-init state.

Code Example:

$(".selector").wijcheckbox("destroy");

refresh

Use the refresh method to set the checkbox element's style.

Code Example:

$(".selector").wijcheckbox("refresh");

Events

changed

A function that is called when the checked state changes.

Default: null

Type: Function

Parameters:

e: A jQuery.Event object.

Parameter Type: EventObj

Code Examples:

There are two ways to use it in code. You can supply a function as an option.

     $("#tags").wijcheckbox({changed: function(e, data) { 
            alert("checkbox is changed to " + (data.checked ? "" : "un") + "checked");
        }
      });

Or you can bind to the event by type: wijcheckboxchanged.

    $("#tags").bind("wijcheckboxchanged", function(e, data) {
         alert("checkbox is changed to " + (data.checked ? "" : "un") + "checked");
       } 
     });

Checkbox

Contents

User Guide

Overview

HTML Markup

Quick Start

API

Options

checked

disabled

Methods

destroy

refresh

Events

changed