JSFiddle - React, Tailwind, and code Playground

by Derek Gathright

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
</head>
<body class="yui3-skin-sam">
<div id="b">                                            
  <button id="a">a</button>    
  <button id="b">b</button>
  <button id="c">c</button>
</div>
</body>
</html>

JavaScript

YUI().use('button-group', 'button', function(Y) {
  var group = new Y.ButtonGroup({
    srcNode: '#b',
    type: 'checkbox',
    on: {
      'selectionChange' : function (e) {

        // Get the button that was just clicked on, and all selected buttons
        var source = e.originEvent.target,
            buttons = this.getSelectedButtons();

        // Loop through each button, and if it isn't the one that was just clicked, unselected it
        Y.Array.each(buttons, function (button) {
          if (source != button) {
            button.removeClass('yui3-button-selected');
          }
        });
        
      }
    }
  }).render();
})