JSFiddle - React, Tailwind, and code Playground

by mauvm

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary active">
    <input type="checkbox" checked="checked"> Option 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option3" checked="checked"> Option 3
  </label>
</div>

JavaScript

/*
    By clicking the radio buttons several times you can see the checked property is correct,
    but the active class is not yet added to the proper label.
*/
$( '.btn-group' ).each( function() {
    var $inputs = $(this).find( 'input' );
    $inputs.on( 'change', function() {
        $inputs.each( function() {
            var $parent = $(this).parent();
            console.log(
                $parent.index(),
                this.checked,
                $parent.hasClass( 'active' )
            );
        } );
    } );
} );