jQuery CheckBox Setup

Home >Shield UI Documentation >CheckBox >JavaScript >jQuery CheckBox Setup

The CheckBox widget allows you to check it and perform an action. The control has three states checked, unchecked and intermediate. The underling element from which the widget can be created is input with type attribute set to ‘checkbox’. In order to render the CheckBox JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an input element for which to initialize the CheckBox functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield CheckBox</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<input id="checkbox" type="checkbox" ></input>

<script type="text/javascript">
    $(function () {
        $("#checkbox").shieldCheckBox({
            label: "checkbox 1",
            checked: true
        });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.