jQuery UI Checkboxradio

jQuery UI Checkboxradio enhances checkbox and radio inputs with themeable button-style labels while preserving the underlying native form controls.

Basic Checkboxradio Top ↑

$( function () {
    $( "input[type=checkbox], input[type=radio]" )
        .checkboxradio();
});

Each input should have a unique ID and a matching <label for="...">.

Themes Top ↑

Demo: Checkboxradio with selectable themes →

Checkboxradio Options Top ↑

classes

$( "#my_checkbox" ).checkboxradio({
    classes: {
        "ui-checkboxradio-label": "ui-state-highlight"
    }
});

disabled

$( "#my_checkbox" ).checkboxradio({
    disabled: true
});

const disabled =
    $( "#my_checkbox" ).checkboxradio(
        "option",
        "disabled"
    );

$( "#my_checkbox" ).checkboxradio(
    "option",
    "disabled",
    false
);

Demo: disabled Checkboxradio →

Demo: set disabled true/false from a selection →

icon

For checkboxes, the icon option controls whether the checkbox icon is shown. Radio buttons do not show the checkbox icon.

$( "#my_checkbox" ).checkboxradio({
    icon: false
});

$( "#my_checkbox" ).checkboxradio(
    "option",
    "icon",
    true
);

Demo: change the icon option →

label

Change the text displayed by the associated label.

$( "#my_checkbox" ).checkboxradio(
    "option",
    "label",
    "Updated label"
);

Demo: update Checkboxradio label →

Checkboxradio Methods Top ↑

destroy()

$( "#my_checkbox" ).checkboxradio( "destroy" );

Demo: destroy() →

disable()

$( "#my_checkbox" ).checkboxradio( "disable" );

Demo: disable() →

Demo: enable/disable with one button →

enable()

$( "#my_checkbox" ).checkboxradio( "enable" );

Demo: enable() →

instance()

const instance =
    $( "#my_checkbox" ).checkboxradio( "instance" );

option()

const options =
    $( "#my_checkbox" ).checkboxradio(
        "option"
    );

Demo: display the Checkboxradio option object →

refresh()

Checkboxradio reads the underlying input state. If code changes checked directly, update the native property with .prop() and then refresh the widget.

$( "#my_checkbox" )
    .prop( "checked", true )
    .checkboxradio( "refresh" );

widget()

const widget =
    $( "#my_checkbox" ).checkboxradio(
        "widget"
    );

Checkboxradio Events Top ↑

create

$( "#my_checkbox" ).checkboxradio({
    create: function () {
        console.log( "Checkboxradio created" );
    }
});

Use Checkboxradio in a Data Grid Top ↑

The original tutorial includes a grid/matrix example where a Checkboxradio control updates a record.

Demo: update a grid record with Checkboxradio →

Manage Width and Font Size Top ↑

Style the generated label class with CSS. Avoid fixing a width unless the design requires it; padding and font size are usually more responsive.

.ui-checkboxradio-label {
    font-size: 1rem;
    padding: .5rem .8rem;
}

← Controlgroup tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: