JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css">
<p><button id="openFruits">Select fruits</button></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>

<p><button id="openCandy">Select candy</button></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>

<p><input type="button" onclick="update();" value="Update"></p>

JavaScript

$(function() { 
        checkState = [];
        var buttons = {
                Cancel: cancel,
                Save: save,
                'Deselect All': deselect,
                'Select All': select
        };
    
        $('#openCandy').click(function() { $('#candy').dialog('open'); });
        $('#openFruits').click(function() { $('#fruits').dialog('open'); });

        $('#fruits').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons,
                open: openDialog
        });

        $('#candy').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons,
                open: openDialog
        });
});

function update() {
        var boxes = new Array();
        $(':checkbox').each(function() {
                if ($(this).is(':checked')) {
                        boxes.push(
                                $(this).attr('name') + 
                                '=' +
                                $(this).val() 
                        );
                }
        });

        alert('boxes: ' + boxes.join('&'));
}

function openDialog() {
    $(':checkbox', this).each(function() {
        $(this).prop('original', $(this).is(':checked'));
    });
}

function select() {
        $(':checkbox', this).prop('checked', true);
}

function deselect() {
        $(':checkbox', this).prop('checked', false);
}

function save() {
        // XXX how to implement?
        $(this).dialog('close');
}

function cancel() {
        $(this).find('input[type="checkbox"]').each(function() {
            $(this).prop('checked', $(this).prop('original'));
        });
        $(this).dialog('close');
}