iCheck check if checkbox is checked

How to Check if an iCheck Checkbox is Checked

Learn various methods to determine the checked state of iCheck checkboxes using JavaScript and jQuery, covering different iCheck initialization scenarios.

iCheck is a popular jQuery plugin that customizes checkboxes and radio buttons, making them consistent across browsers and devices. While iCheck enhances the visual appeal and functionality, checking their state isn't always as straightforward as with native HTML checkboxes. This article will guide you through different approaches to reliably determine if an iCheck checkbox is checked, whether you're using plain JavaScript or jQuery.

Understanding iCheck's DOM Manipulation

When iCheck initializes, it wraps the original checkbox input element within a div and often hides the original input. It then creates a custom visual representation. This means directly querying the original input's checked property might not always work as expected, especially if iCheck's internal state isn't perfectly synchronized or if you're targeting the wrong element. The key is to understand how iCheck manages the state and which attributes it uses.

flowchart TD
    A[Original HTML Checkbox] --> B{iCheck Initialization}
    B --> C[iCheck Wrapper DIV]
    C --> D[Hidden Original Input]
    C --> E[Custom Visual Element]
    D --"Updates 'checked' attribute"--> E
    E --"User Interaction"--> D

How iCheck modifies the DOM structure and manages state

Method 1: Using jQuery's :checked Selector

The most common and often most reliable way to check the state of an iCheck checkbox is by using jQuery's :checked selector. iCheck ensures that the original (hidden) input element's checked property and attribute are correctly updated when its state changes. This method works seamlessly because jQuery's selector directly queries the underlying DOM property.

// HTML structure (example)
// <input type="checkbox" id="myCheckbox" class="icheck-me">

// Initialize iCheck
$('.icheck-me').iCheck();

// Check if the checkbox is checked using jQuery
if ($('#myCheckbox').is(':checked')) {
    console.log('iCheck checkbox is checked!');
} else {
    console.log('iCheck checkbox is NOT checked!');
}

// Another way to get the boolean state
const isChecked = $('#myCheckbox').prop('checked');
console.log('Is checked (prop):', isChecked);

Checking iCheck checkbox state with jQuery's :checked selector and .prop()

Method 2: Using iCheck's API (if available)

iCheck provides its own API methods to interact with the checkboxes. While .is(':checked') is generally sufficient, you might encounter scenarios where using iCheck's specific methods is preferred or necessary, especially if you're dealing with complex iCheck configurations or events. iCheck's isChecked method can be used, though it often relies on the same underlying DOM properties.

// HTML structure (example)
// <input type="checkbox" id="anotherCheckbox" class="icheck-me">

// Initialize iCheck
$('#anotherCheckbox').iCheck();

// Check if the checkbox is checked using iCheck's API (if available/needed)
// Note: This often internally uses .is(':checked') or .prop('checked')
// The direct 'isChecked' method might not be universally exposed in all iCheck versions
// A more common approach is to trigger a 'check' or 'uncheck' event and listen.

// To get the state, stick to .is(':checked') or .prop('checked') as shown above.
// If you need to react to changes, use iCheck's 'ifChecked' or 'ifUnchecked' events:

$('#anotherCheckbox').on('ifChecked', function(event){
  console.log('Checkbox ' + this.id + ' is now checked!');
});

$('#anotherCheckbox').on('ifUnchecked', function(event){
  console.log('Checkbox ' + this.id + ' is now unchecked!');
});

// To programmatically check/uncheck and trigger events:
// $('#anotherCheckbox').iCheck('check');
// $('#anotherCheckbox').iCheck('uncheck');

Interacting with iCheck checkboxes using its event API

Method 3: Pure JavaScript Approach

If you're working in an environment where jQuery is not available or you prefer a pure JavaScript solution, you can still check the state. The principle remains the same: target the original input element and access its checked property. Remember that iCheck hides the original input, but it's still part of the DOM.

// HTML structure (example)
// <input type="checkbox" id="jsCheckbox" class="icheck-me">

// Initialize iCheck (assuming jQuery is loaded for iCheck itself)
$('#jsCheckbox').iCheck();

// Pure JavaScript way to check the state
const jsCheckbox = document.getElementById('jsCheckbox');

if (jsCheckbox && jsCheckbox.checked) {
    console.log('Pure JS: iCheck checkbox is checked!');
} else if (jsCheckbox) {
    console.log('Pure JS: iCheck checkbox is NOT checked!');
} else {
    console.log('Pure JS: Checkbox element not found!');
}

Checking iCheck checkbox state using pure JavaScript