CheckBox check on Click btn. Jquery and HTML5 data attribute.

CheckBox check on Click btn. Jquery and HTML5 data attribute.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.8.4/jquery-ui.min.js"></script>
<ul id="emailsubscribe">
    <li>Email Alert 1
        <input type="checkbox" class="inp-checkbox" name="subscribe" data-email="email-alert1" />
    </li>
    <li>Email Alert 2
        <input type="checkbox" class="inp-checkbox" name="subscribe" data-email="email-alert2" />
    </li>
</ul>
<button id="savesettings">Save Settings</button>
<div id="alertChoices"></div>

CSS

.inp-checkbox+label {
    margin-left: .5em;
    width:16px;
    height:16px;
    vertical-align:middle;
}
#savesettings {
    display: inline-block;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

JavaScript

$(function () {
    $('#savesettings').on("click", function () {
        var checkValues = $('input[name=subscribe]:checked').map(function () {
            return $(this).data('email');
        }).get();
        var alertCount = $("#emailsubscribe [name=subscribe]:checked").length;
        $("#alertChoices").html("You will be subscribed to " + alertCount + " alerts: " + "<i>" + checkValues + "</i>");

    });
});


// trigger the UI 
runme();

// setup the checkboxes from UI and  
function runme() {

    $(".inp-checkbox").each(function (i) {
        var newCheckBox = createCheckBox($(this), i);
    });
};

function createCheckBox(ele, i) {
    var newID = "cbx-" + i;
    ele.attr({
        "id": newID
    })
        .prop({
        "type": "checkbox"
    })
        .after($("<label />").attr({
        for: newID
    }))
        .button({
        text: false
    })
        .click(function (e) {
        var toConsole = $(this).button("option", {
            icons: {
                primary: $(this)[0].checked ? "ui-icon-check" : ""
            }
        });
        console.log(toConsole, toConsole[0].checked);
    });
    return ele;
}