ejmCheckBox

5 Jun 20239 minutes to read

The Essential JavaScript Mobile widget for CheckBox element allows you to check an option or multiple options to perform an action, within your webpage and allows you to specify an option from the list.
Custom Design for Html CheckBox control.

Custom Design for HTML CheckBox control.

$(element).ejmCheckBox()

Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
$("#chkbox").ejmCheckBox();
</script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    checked Boolean

    Specifies whether to check the control.

    Default Value:

    • false

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-checked=true />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
$("#chkbox").ejmCheckBox({ checked: true });
</script>

    cssClass String

    Sets the root class for CheckBox theme. This cssClass API helps to use custom skinning option for CheckBox control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value:

    • ””

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-cssclass="customclass" />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
// To set cssClass API value
$("#chkbox").ejmCheckBox({ cssClass: "customclass" });
</script>

    enabled Boolean

    Specifies whether to enable or disable the control.

    Default Value:

    • true

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-enabled=false />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
// To set enabled API value
$("#chkbox").ejmCheckBox({ enabled: false });
</script>

    enablePersistence Boolean

    Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

    Default Value:

    • false

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-enablepersistence=true />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
$("#chkbox").ejmCheckBox({ enablePersistence: true });
</script>

    enableRippleEffect Boolean

    Specifies the ripple effect for the CheckBox control. By default in android mode its value is true and other rendermode we need to set as true.

    Default Value:

    • ej.isAndroid()?true:false

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-enablerippleeffect=true />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
$("#chkbox").ejmCheckBox({ enableRippleEffect: true });
</script>

    renderMode enum

    Specifies the rendering mode of the control.SeeRenderMode

    Default Value:

    • auto

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-rendermode="auto" />
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" />
<script>
// To set renderMode API value
$("#chkbox").ejmCheckBox({ renderMode: ej.mobile.RenderMode.Auto });
</script>

    Methods

    disable()

    To disable the CheckBox.

    Example

  • HTML
    • <input type="checkbox" id="chkbox" />
<script>
// get the CheckBox current state
$("#chkbox").ejmCheckBox();
$("#chkbox").ejmCheckBox("disable");
</script>

    enable()

    To enable the CheckBox.

    Example

  • HTML
    • <input type="checkbox" id="chkbox" />
<script>
$("#chkbox").ejmCheckBox();
$("#chkbox").ejmCheckBox("enable");
</script>

    isChecked()

    To check whether the CheckBox is checked or not.

    Example

  • HTML
    • <input type="checkbox" id="chkbox" />
<script>
// get the CheckBox current state
$("#chkbox").ejmCheckBox();
$("#chkbox").ejmCheckBox("isChecked");
</script>

    Events

    beforeChange

    Event triggers before the CheckBox state is changed.

    Name Type Description
    argument Object Event parameters from CheckBox.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the current element associated value.
    isChecked boolean Returns the status of the control.
    controlType string Returns the name of the control type
    element Object Returns the current CheckBox element

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-beforechange="onBeforeChange" />
<script>
// before change event for CheckBox
function onBeforeChange(args) {
//handle the event            
}
</script>
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" />
// before change event for CheckBox
<script>
$("#chkbox").ejmCheckBox({
beforeChange: function (args) {
//handle the event                
}
});
</script>

    change

    Event triggers when the CheckBox state is changed.

    Name Type Description
    argument Object Event parameters from CheckBox.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the current element associated value.
    isChecked boolean Returns the status of the control.
    controlType string Returns the name of the control type
    element Object return the current CheckBox element

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-change="onChange" />
<script>
// change event for CheckBox
function onChange(args) {
//handle the event
}
</script>
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" />
// change event for CheckBox
<script>
$("#chkbox").ejmCheckBox({
change: function (args) {
//handle the event
}
});
</script>

    touchEnd

    Event triggers when touch end happens on the control.

    Name Type Description
    argument Object Event parameters from CheckBox.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value boolean Returns the current element associated value.
    isChecked boolean Returns the status of the control.

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-touchend="touchEnd" />
<script>
// touchEnd event for CheckBox
function touchEnd(args) {
//handle the event
}
</script>
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" />
// touchEnd event for CheckBox
<script>
$("#chkbox").ejmCheckBox({
touchEnd: function (args) {
//handle the event
}
});
</script>

    touchStart

    Event triggers when touch start happens on the control.

    Name Type Description
    argument Object Event parameters from CheckBox.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    value string Returns the current element associated value.
    isChecked boolean Returns the status of the control.
    controlType string Returns the name of the control type
    element Object Returns the current CheckBox element

    Example

  • HTML
    • <!-- Unobtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" data-ej-touchstart="touchStart" />
<script>
// touchStart event for CheckBox
function touchStart(args) {
//handle the event
}
</script>
  • HTML
    • <!-- Obtrusive way of rendering -->
<input type="checkbox" id="chkbox" data-role="ejmcheckbox" />
// touchStart event for CheckBox
<script>
$("#chkbox").ejmCheckBox({
touchStart: function (args) {
//handle the event
}
});
</script>