Checkbox experiments

by mark47

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<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>Doom</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: #663399;
    /*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 {
}
label:hover {
    cursor: pointer;
}

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("click", function () {

    var radioName = $(this).attr("name");
    
    // To allow unchecking of selected radios
    var previousValue = $(this).attr('previousValue');
    if (previousValue == 'checked') {
        $(this).removeAttr('checked');
        $(this).attr('previousValue', false);
    } else {
        $("input[name=" + radioName + "]:radio").attr('previousValue', false);
        $(this).attr('previousValue', 'checked');
    }

    
    $(':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');
        }
    });
});