JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">

<body class="yui3-skin-sam">
<div class='yui3-skin-sam'> <!-- You need this skin class -->

    <div id='checkboxContainer'>
        <h2>Checkbox Group</h2>
        <button class='checkbox'>Button 1</button>
        <button class='checkbox'>Button 2</button>
        <button class='checkbox'>Button 3</button>
    </div>

    <div id='radioContainer'>
        <h2>Radio Group</h2>
        <button class='radio'>Button A</button>
        <button class='radio'>Button B</button>
        <button class='radio'>Button C</button>
    </div>
    <br><br><button id="uncheck">Uncheck All</button>

JavaScript

YUI().use('button-group', function(Y){

    // A group of checkbox-like buttons
    var buttonGroupCB = new Y.ButtonGroup({
        srcNode: '#checkboxContainer',
        type: 'checkbox',
        on: {
            'selectionChange': function(e){
                var selection = buttonGroupCB.getSelectedButtons();
                Y.log('buttonGroup2 selected count = ' + selection.length);
            }
        }
    }).render();

    $('#uncheck').bind('click', function() {
        
        buttonGroupCB.getSelectedButtons().forEach(function (btn) {
btn.removeClass(Y.ButtonGroup.CLASS_NAMES.SELECTED);
        });
    });

    // A group of radio-like buttons
    var buttonGroupRadio = new Y.ButtonGroup({
        srcNode: '#radioContainer',
        type: 'radio'
    })

    buttonGroupRadio.render();

    buttonGroupRadio.on('selectionChange', function(e){
        Y.log('buttonGroup selection changed');
    });

});