JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="amcom-grid-selector">
    <input type="checkbox" class="amcom-grid-selector-all"/>
    <ul class="amcom-grid-selector-menu">
        <li><a href="#all">All</a></li>
        <li><a href="#none">None</a></li>
    </ul>
</div>
<textarea id="debug" rows="20" cols="80"></textarea>

CSS

.amcom-grid-selector 
{ 
    float: left; 
    font-size: 14px;
    height: 25px;
    width: 36px;
}
.amcom-grid-selector .ui-button-text
{
    padding: 3px 16px 3px 6px;
    line-height: 19px;
}
.amcom-grid-selector .ui-button-text input[type=checkbox]
{
    width: 14px;
}
.amcom-grid-selector.ui-button-text-icon-secondary .ui-button-icon-secondary
{
    background-position: -64px -12px;
    height: 25px;
    right: 0;
    top: 8px;
}
.amcom-grid-selector-menu 
{ 
    background-color: #FFF;
    display: none; 
    position: absolute; 
    text-align: left;
}
#debug 
{ 
    margin-top: 100px; 
    clear: both; 
}

JavaScript

$('.amcom-grid-selector').button({ icons: { secondary: 'ui-icon-triangle-1-s' } }).click(function (e) {
    $('#debug').val($('#debug').val() + e.target.className + '.click()\n\tchecked: ' + $(this).find('input:checkbox').is(':checked') + '\n');
    if ($(e.target).hasClass('ui-icon')) {
        $('#debug').val($('#debug').val() + '\tshow menu\n');
        $(this).find('.amcom-grid-selector-menu').toggle('fast');
    } else if (!$(e.target).is(':checkbox')) {
        $(this).find('input:checkbox').prop('checked', !$(this).find('input:checkbox').is(':checked'));
    }
});