CheckBox Styled with Data setting

CheckBox Styled with Data setting

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
         <h2>Choose Logo</h2>

        <div class="col-sm-12 col-xs-12">
            <ul class="panel panel-default">
                <li>
                    <label id="logorequired">
                        <input type="checkbox"/><i class="fa fa-square-o" data-logo=""></i> Don't Require Logo, Skip This Stage</label>
                </li>
            </ul>
            
            <div class="well well-sm"></div>
        </div>
    </div>
</div>

CSS

body {
    background: #fcf4d2;
    font-family: arial, sans-serif;
    text-align: center;
}
#logorequired [type=checkbox] {
    display: none;
}
label {
    cursor: pointer;
}
i.fa {
    font-size: 18px;
    padding-top:5px
}

[class*=fa].icon-fixed-width {
    text-align: left;
}

JavaScript

$("[type=checkbox]").change(function () {
    var $checkbox = $(this)
    var $logo = $checkbox.siblings("[class*=fa]")
    var $needsLogo = $logo.data("logo")
    var checked = $checkbox.is(":checked")
    $logo.toggleClass('fa-check-square-o', checked)
        .toggleClass('fa-square-o', !checked)
    if (checked) $logo.data('logo', "no-logo")
    else $logo.data('logo', "use-logo")
    $(".well").html($logo.data("logo"))
});