JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<ul class="advanced-filters-list unstyled">
    <li class="is-active">
        <h3><i class="icon-small icon-time"></i>Time to cook</h3>
        <div class="advanced-filter-container">
            <h2 class="separator separator-dashed-bottom-graylight">Time to cook</h2>
            <ul class="advanced-options unstyled group">
                <li class="active">
                    <label for="advanced-filter-time-any">
                        <input type="checkbox" id="advanced-filter-time-any" name="filter-advanced-time" checked class="any-check on-by-default">
                        Any
                    </label>
                </li>
                <li class="active">
                    <label for="advanced-filter-time-10">
                        <input type="checkbox" id="advanced-filter-time-10" name="filter-advanced-time" checked class="on-by-default">
                        Less than 10 minutes
                    </label>
                </li>
                <li class="active">
                    <label for="advanced-filter-time-10-30">
                        <input type="checkbox" id="advanced-filter-time-10-30" name="filter-advanced-time" checked class="on-by-default">
                        10-30 minutes
                    </label>
                </li>
                <li class="active">
                    <label for="advanced-filter-time-30-60">
                        <input type="checkbox" id="advanced-filter-time-30-60" name="filter-advanced-time" checked class="on-by-default">
                        30-60 minutes
                    </label>
                </li>
                <li class="active">
                    <label for="advanced-filter-time-60">
                        <input type="checkbox" id="advanced-filter-time-60" name="filter-advanced-time" checked class="on-by-default">
                        Over an hour
                    </label>
                </li>
            </ul>
        </div>
    </li>

    <li>
      ...

JavaScript

$('#input-parent').each(function(i) {
    var $this = $(this),
        isModified
    ;

    $this.find('input').each(function() {
        var $this = $(this);
        if ( !isModified) {
            isModified = $this[0].defaultChecked !== $this[0].checked;
        }
    });

    if ( isModified ) {
        // Do something
        alert('it is modified');
    } else {
        // Do something else
        alert('it is not modified');
    }

});