Check

Helps to control the set of checkboxes by selecting them all or vice versa by deselecting all checkboxes.

Usage #

Target

<ul data-kube="check" data-target="#mytarget">
    <li>
        <label class="checkbox">
            <input type="checkbox" data-type="all"> Check all
        </label>
    </li>
    <li>
        <label class="checkbox">
            <input type="checkbox" value="1" class="ch"> Item 1
        </label>
    </li>
    <li>...</li>
</ul>

// Target
<input type="text" id="mytarget" value="">

Settings #

target

Type: String

Default: false

This setting sets the selector of an element in which the chosen checkboxes value will be stored.

<ul data-kube="check" data-target="#mytarget">
    <li>
        <label class="checkbox">
            <input type="checkbox" data-type="all"> Check all
        </label>
    </li>
    <li>
        <label class="checkbox">
            <input type="checkbox" value="1" class="ch"> Item 1
        </label>
    </li>
    <li>...</li>
</ul>

// Target
<input type="text" id="mytarget" value="">

classname

Type: String

Default: 'ch'

This setting allows to set the classname of checkboxes by which the module determines which checkboxes should be selectable.

<ul data-kube="check" data-classname="my-checkbox">
    <li>
        <label class="checkbox">
            <input type="checkbox" data-type="all"> Check all
        </label>
    </li>
    <li>
        <label class="checkbox">
            <input type="checkbox" value="1" class="my-checkbox"> Item 1
        </label>
    </li>
    <li>...</li>
</ul>

Events #

Event Description
set This event fires when a checkbox is selected.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            check: {
                set: function(sender, $target)
                {
                    console.log('Checkbox is selected in the check module.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific check module

Set an ID for the check:

<div id="mycheck" data-kube="check">...</div>

Or set data-name attribute:

<div data-name="mycheck" data-kube="check">...</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            check: {
                set: function(sender, $target)
                {
                    if (sender._id === 'mycheck')
                    {
                        console.log('Checked.');
                    }
                }
            }
        }
    });
})(Kube);