Checkbox experiments

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<body>
    <div class="container">
        <div class="row" style="margin: 10px">
            <div class="span12">
                <label class="checkbox">
                    <input type="checkbox" value=""> <i class="icon-check-empty icon-2x"></i><span>Zoom</span>

                </label>
                <label class="checkbox">
                    <input type="checkbox" value=""> <i class="icon-check-empty icon-2x"></i><span>Boom</span>

                </label>
                <label class="checkbox">
                    <input type="checkbox" value=""> <i class="icon-check-empty icon-2x"></i><span>Bloom</span>

                </label>
                <br />
                <br />
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><i class="icon-circle-blank icon-2x"></i><span>Radio Set 1 - Dice</span>

                </label>
                <label class="radio">
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><i class="icon-circle-blank icon-2x"></i><span>Radio Set 1 - Rice</span>

                </label>
                <br />
                <br />
                <label class="radio">
                    <input type="radio" name="optionsRadios3" id="optionsRadios3" value="option1"><i class="icon-circle-blank icon-2x"></i><span>Radio Set 2 - Mountain</span>

                </label>
                <label class="radio">
                    <input type="radio" name="optionsRadios3" id="optionsRadios4" value="option2"><i class="icon-circle-blank icon-2x"></i><span>Radio Set 2 - Fountain</span>

                </label>
                <br />
               ...

CSS

label, input, button, select, textarea {
    font-size: 24px;
    line-height: 40px
}
label {
    position: relative;
    margin-bottom: .5em;
}
label i {
    position: absolute;
    left: 0;
    color: #ccc;
    /*text-shadow: 1px 1px 2px #888;*/
}
label > i {
    background-color: white;
}
label span {
    margin-left: 40px;
}
input {
    width: 1px;
    height: 1px;
}
.icon-check, .icon-circle {
}

JavaScript

$("input[type=checkbox]").on("change", function () {
    var findIcon = $(this).parent().find("i");
    if (this.checked) {
        var c = '#f00'
        $(findIcon).addClass('icon-check text-info').removeClass('icon-check-empty');
    } else {
        var c = '#09f'
        $(findIcon).addClass('icon-check-empty').removeClass('icon-check text-info');
    }
    console.log(c);
});
$("input[type=radio]").on("change", function () {
    var radioName = $(this).attr("name");
    $(':radio[name="' + radioName + '"]').each(function () {
        var findIcon = $(this).parent().find("i");
        if (this.checked) {
            $(findIcon).addClass('icon-circle text-info').removeClass('icon-circle-blank');
        } else {
            $(findIcon).addClass('icon-circle-blank').removeClass('icon-circle text-info');
        }
    });
});