Checkbox

The checkbox widget, from the SaVaGe library, allows you to create fully customizable checkbox inputs.

Unlike the default's checkbox that you can create with the <input> element, the SaVaGe's checkbox can be configured to change his size, his colors and his marks. You can also define three-states checkboxs and create option group.

How to use it

In order to use it, you must only include the D3.js and SaVaGe scripts in your page.

<html>
    <head>
        <script src="d3.v3.min.js" type="text/javascript"></script>
        <script src="savage.checkbox.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Add a checkbox at the end of 'body'.
            SaVaGe.Checkbox();
        </script>
    </body>
</html>

Examples

Basics

The Checkbox() method accepts, as paramater, a single object, whose attributes can be used to customize the widget.

The most fundamental of them is the container attribute, which allows to define, using CSS selectors, the element which is going to serve as container for the widget. If this parameter is not specified, the widget is going to appended at the end of <body>.

Code

<div id="basic"></div>
<script type="text/javascript">
    SaVaGe.CheckBox({container: "#basic"});
</script>

Result

Initial value and three-state checkbox

With the value attribute, you can specify the initial value of the checkbox while the tristate attribute allows you to create three-states checkboxs (which besides the 'checked' and 'unchecked' states it also allows the 'cancelled' state).

Code

<div id="checked"></div>
<div id="tristate"></div>
<script type="text/javascript">
    SaVaGe.CheckBox({container: "#checked", value: 1});
    SaVaGe.CheckBox({container: "#tristate", tristate: true, value: 2});
</script>

Result

Changing the check marks

By default, the check mark is a tick (and a cross for the 'cancelled' state in tristate checkboxs), however this can be changed by using the marks attribute.

Code

<div id="fill"></div>
<div id="cross"></div>
<script type="text/javascript">
    SaVaGe.CheckBox({container: "#fill", marks:{checked: "tick", unchecked:"cross"}});
    SaVaGe.CheckBox({container: "#cross", tristate:true, marks:{checked: "cross", cancelled:"fill"}, value:2});
</script>

Result

Size, borders and colors

With the size attribute you can change the width and height of the checkbox, with the border atrribute you can specify the width and the radius of the checkbox's border, and with the colors attribute you can define the different colors used when drawing the checkbox.

Code

<div id="big"></div>
<div id="colored"></div>
<script type="text/javascript">
    SaVaGe.CheckBox({container: "#big", size:100, border:{width: 10, radius: 20}});
    SaVaGe.CheckBox({container: "#colored", tristate: true, colors:{back: '#eef', border:'blue', tick:'green', cross:'red'}});
</script>

Result

Return value and option groups

The Checkbox() methods always returns a object with the methods setValue(), getValue() and remove(). This object can be used to further extends the features of the widgets, such as creating option groups.

Code

<div id="radio1"></div>
<div id="radio2"></div>
<div id="radio3"></div>
<script type="text/javascript">
    var radioGroup = [];
    var radioGroupSomething = function(radio) {
        for(var i=0; i<radioGroup.length; i++)
            if(radioGroup[i] !== radio) radioGroup[i].setValue(0);
    };
    radioGroup.push( SaVaGe.CheckBox({container: "#radio1", size: 30, border:{radius: 15}, onChange: radioGroupSomething}) );
    radioGroup.push( SaVaGe.CheckBox({container: "#radio2", size: 30, border:{radius: 15}, onChange: radioGroupSomething}) );
    radioGroup.push( SaVaGe.CheckBox({container: "#radio3", size: 30, border:{radius: 15}, onChange: radioGroupSomething}) );
</script>

Result