Checkbox temp test

by Marventus

HTML

<h3>"Why &lt;= IE8 Browsers Suck" Test:</h3><br/>
<span id="trigger1" class="trigger" title="click me!">&nbsp;</span>
<input id="cb1" class="styled" data-name="Checkbox 1" type="checkbox" />
<label id="label1">Checkbox 1</label>
<br/>
<span id="trigger2" class="trigger" title="click me!">&nbsp;</span>
<input id="cb2" class="styled" data-name="Checkbox 2" type="checkbox" />
<label id="label2">Checkbox 2</label>
<br/>
<p><span>Test:</span> The checkbox <span id="cb_name">Unknown</span> status is <span id="cb_status">unknown</span>.</p>
<p><span>Observations:</span> In IE &lt;=8 browsers, clicking on the red box next to a checkbox and on the checkbox directly produce different results. In IE8 and below, the checkbox value tests exactly the opposite when the red box is clicked.</p>
<p><span>Explanation:</span> It would seem as if the issue occurs when the click event is triggered by another event (be it <em>click</em> or <em>change</em>). In other words, in IE &lt;=8 browsers, the change in the checkbox's checked attribute seems to come in <strong>before</strong> the execution of its associated function.</p>
<p><span>Conclusion:</span></p>
<center>IE &lt;= 8 browsers suck ass big time!</center>

CSS

center {
    font-size:30px;
    color:#c00;
}
html {
    padding:10px 40px;
}
label {
    margin-left:5px;
}
span {
    font-weight:bold;
}
.trigger {
    background:#c00;
    display:inline-block;
    cursor:pointer;
    height:14px;
    width:14px;
}

JavaScript

$(function() {
    var check,
    value;
    $("input:checkbox").change(function () {
        value = $("#" + $(this).attr("id").replace("cb", "label")).text();
        check = $(this).is(":checked") ? "checked" : "unchecked";
        $("#cb_name").text(value);
        $("#cb_status").text(check);
    });
    $(".trigger").mousedown(function () {
        ta = $("#" + $(this).attr("id").replace("trigger", "cb"));
        ta.trigger("click");
    });
});