Bad Bootstrap Select All Checkboxes

A really bad way to select all checkboxes.

by secretgspot

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<div class="control-group">
<div class="controls">
    <div class="input">
        <div class="btn-group" >
            
            <label class="btn  btn-toggle" for="colors-1-toggle-0">
                <input type="checkbox" id="colors-1-toggle-0" name="colors-1[]" value="color_c" />C
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-1">
                <input type="checkbox" id="colors-1-toggle-1" name="colors-1[]" value="color_m" />M
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-2">
                <input type="checkbox" id="colors-1-toggle-2" name="colors-1[]" value="color_y" />Y
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-3">
                <input type="checkbox" id="colors-1-toggle-3" name="colors-1[]" value="color_k" />K
            </label>
        </div>
    </div>
    <button id="toggle-all" class="btn btn-info">Select All</button>
</div></div>

JavaScript

$('#toggle-all').click(function() {
    $('.btn-group input[type="checkbox"]').prop('checked', true);
});