JSDoc: Class: CheckboxInputWidget

new CheckboxInputWidget(configopt)

CheckboxInputWidgets, like HTML checkboxes, can be selected and/or configured with a value. Note that these input widgets are best laid out in field layouts that use the inline alignment. For more information, please see the [OOjs UI documentation on MediaWiki][1].

This widget can be used inside an HTML form, such as a OO.ui.FormLayout.

Parameters:

Name Type Attributes Description

config

Object

Configuration options

Properties

Name	Type	Attributes	Default	Description
`selected`	boolean	<optional>	false	Select the checkbox initially. By default, the checkbox is not selected.

Source:

widgets/CheckboxInputWidget.js, line 42

Example

// An example of selected, unselected, and disabled checkbox inputs
    var checkbox1=new OO.ui.CheckboxInputWidget( {
         value: 'a',
         selected: true
    } );
    var checkbox2=new OO.ui.CheckboxInputWidget( {
        value: 'b'
    } );
    var checkbox3=new OO.ui.CheckboxInputWidget( {
        value:'c',
        disabled: true
    } );
    // Create a fieldset layout with fields for each checkbox.
    var fieldset = new OO.ui.FieldsetLayout( {
        label: 'Checkboxes'
    } );
    fieldset.addItems( [
        new OO.ui.FieldLayout( checkbox1, { label: 'Selected checkbox', align: 'inline' } ),
        new OO.ui.FieldLayout( checkbox2, { label: 'Unselected checkbox', align: 'inline' } ),
        new OO.ui.FieldLayout( checkbox3, { label: 'Disabled checkbox', align: 'inline' } ),
    ] );
    $( 'body' ).append( fieldset.$element );

[1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs

Extends

OO.ui.InputWidget

Methods

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:

OO.ui.Element#getClosestScrollableElementContainer

Source:

Element.js, line 930

Returns:

Closest scrollable container

Type: HTMLElement

getData() → {Mixed}

Get element data.

Inherited From:

OO.ui.Element#getData

Source:

Element.js, line 815

Returns:

Element data

Type: Mixed

getElementDocument() → {HTMLDocument}

Get the DOM document.

Inherited From:

OO.ui.Element#getElementDocument

Source:

Element.js, line 911

Returns:

Document object

Type: HTMLDocument

getElementGroup() → {OO.ui.mixin.GroupElement|null}

Get group element is in.

Inherited From:

OO.ui.Element#getElementGroup

Source:

Element.js, line 939

Returns:

Group element, null if none

Type: OO.ui.mixin.GroupElement | null

getElementId() → {string}

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Inherited From:

OO.ui.Element#getElementId

Source:

Element.js, line 848

Returns:

Type: string

getElementWindow() → {Window}

Get the DOM window.

Inherited From:

OO.ui.Element#getElementWindow

Source:

Element.js, line 921

Returns:

Window object

Type: Window

(protected) getInputElement(config) → {jQuery}

Get input element.

Subclasses of OO.ui.InputWidget use the config parameter to produce different elements in different circumstances. The element must have a value property (like form elements).

Parameters:

Name	Type	Description
`config`	Object	Configuration options

Overrides:

OO.ui.InputWidget#getInputElement

Source:

widgets/InputWidget.js, line 120

Returns:

Input element

Type: jQuery

getInputId() → {string|null}

Get an ID of a labelable node which is part of this widget, if any, to be used for <label for> value.

If this function returns null, the widget should have a meaningful #simulateLabelClick method instead.

Inherited From:

OO.ui.Widget#getInputId

Source:

Widget.js, line 113

Returns:

The ID of the labelable element

Type: string | null

getTagName() → {string}

Get the HTML tag name.

Override this method to base the result on instance information.

Inherited From:

OO.ui.Element#getTagName

Source:

Element.js, line 893

Returns:

HTML tag name

Type: string

getValue() → {string}

Get the value of the input.

Inherited From:

OO.ui.InputWidget#getValue

Source:

widgets/InputWidget.js, line 145

Returns:

Input value

Type: string

isDisabled() → {boolean}

Check if the widget is disabled.

Inherited From:

OO.ui.Widget#isDisabled

Source:

Widget.js, line 65

Returns:

Widget is disabled

Type: boolean

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:

OO.ui.Element#isElementAttached

Source:

Element.js, line 902

Returns:

The element is attached to the DOM

Type: boolean

isSelected() → {boolean}

Check if this checkbox is selected.

Source:

widgets/CheckboxInputWidget.js, line 124

Returns:

Checkbox is selected

Type: boolean

isVisible() → {boolean}

Check if element is visible.

Inherited From:

OO.ui.Element#isVisible

Source:

Element.js, line 806

Returns:

element is visible

Type: boolean

(protected) restorePreInfuseState(state)

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:

Name	Type	Description
`state`	Object

Overrides:

OO.ui.InputWidget#restorePreInfuseState

Source:

Element.js, line 980

scrollElementIntoView(configopt) → {jQuery.Promise}

Scroll element into view.

Parameters:

Name	Type	Attributes	Description
`config`	Object	<optional>	Configuration options

Inherited From:

OO.ui.Element#scrollElementIntoView

Source:

Element.js, line 960

Returns:

Promise which resolves when the scroll is complete

Type: jQuery.Promise

setData(data)

Set element data.

Parameters:

Name	Type	Description
`data`	Mixed	Element data

Inherited From:

OO.ui.Element#setData

Source:

Element.js, line 825

setDir(dir)

Set the directionality of the input.

Parameters:

Name	Type	Description
`dir`	string	Text directionality: 'ltr', 'rtl' or 'auto'

Inherited From:

OO.ui.InputWidget#setDir

Source:

widgets/InputWidget.js, line 161

setDisabled(disabled)

Set the 'disabled' state of the widget.

When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.

Parameters:

Name	Type	Description
`disabled`	boolean	Disable widget

Inherited From:

OO.ui.Widget#setDisabled

Source:

Widget.js, line 77

setElementGroup(group)

Set group element is in.

Parameters:

Name	Type	Description
`group`	OO.ui.mixin.GroupElement \| null	Group element, null if none

Inherited From:

OO.ui.Element#setElementGroup

Source:

Element.js, line 949

setElementId(id)

Set the element has an 'id' attribute.

Parameters:

Name	Type	Description
`id`	string

Inherited From:

OO.ui.Element#setElementId

Source:

Element.js, line 836

setInputId(id)

Set the 'id' attribute of the <input> element.

Parameters:

Name	Type	Description
`id`	string

Inherited From:

OO.ui.InputWidget#setInputId

Source:

widgets/InputWidget.js, line 223

setSelected(state)

Set selection state of this checkbox.

Parameters:

Name	Type	Description
`state`	boolean	`true` for selected

Source:

widgets/CheckboxInputWidget.js, line 109

setValue(value)

Set the value of the input.

Parameters:

Name	Type	Description
`value`	string	New value

Inherited From:

OO.ui.InputWidget#setValue

Source:

widgets/InputWidget.js, line 173

Fires:

event:change

simulateLabelClick()

Simulate the behavior of clicking on a label (a HTML <label> element) bound to this input. HTML only allows <label> to act on specific "labelable" elements; complex widgets might need to override this method to provide intuitive, accessible behavior.

By default, this does nothing. OO.ui.mixin.TabIndexedElement overrides it for focusable widgets. Individual widgets may override it too.

This method is called by OO.ui.LabelWidget and OO.ui.FieldLayout. It should not be called directly.

Overrides: