jQuery .is(":focus") doesn't recognize focus on checkbox in browsers other than IE
<p>I have a checkbox and a text input. Here's how it works: The cursor goes to the text input when the checkbox is checked. When the text input loses focus, I look to see whether the text input value is empty. If it is, I uncheck the checkbox.</p>

<p>Problem is when it loses focus because I click on the checkbox a second time... The checkbox unchecks and then is checked again, so I can't uncheck it.</p>

<p>I fix this by looking to see if the new focused element is the checkbox. If it isn't, I proceed as normal. This works perfectly in IE, but not in the other browsers I've tested (Chrome, Firefox, Safari).</p>

<p>Anyone have any ideas how to get this to work? Or maybe a different solution?</p>

<p>My actual problem with blur function: <a href="http://jsfiddle.net/4mJuU/5/" rel="nofollow">http://jsfiddle.net/4mJuU/5/</a> (only works in IE)</p>

<p>Simple focus with just a text input <a href="http://jsfiddle.net/HWFHv/2/" rel="nofollow">http://jsfiddle.net/HWFHv/2/</a> (works)</p>

<p>Simple focus with just a checkbox <a href="http://jsfiddle.net/sXqcG/1/" rel="nofollow">http://jsfiddle.net/sXqcG/1/</a> (doesn't work in Chrome/Safari)</p>

<pre><code>$('#cbx').live('click', function() {
    if ($(this).is(':checked')) {
        $('#txt').focus();
    }
    else {
        $('#txt').val('');
    }
});
$('#txt').live('blur', function(event) {
    //var doesCbxHaveFocus = document.activeElement.id == 'cbx';
    var doesCbxHaveFocus = $('#cbx').is(':focus');
    console.log(doesCbxHaveFocus);
    if (!doesCbxHaveFocus) {
        if ($(this).val() == '') {
            $('#cbx').prop('checked', false);
        }
        else {
            $('#cbx').prop('checked', true);
        }
    }
});
</code></pre>
