Cant get jQuery hover to work with an if statement

Question

I have a row of custom styled radio buttons. On hover, I want a sort icon (two arrows made with css) to appear. I've gotten this to work successfully with jQuery's .hover function. However, when I try to add some logic to only allow the sort arrow to appear when a radio button is NOT checked, the hover event does not work. There's obviously a problem with the if statement; I suspect it's the syntax, but I'm just not sure how to fix it.

JS

// COLUMN HEADING ROLLOVER SORT BUTTONS //

    var wrap = "<div class='sortWrap'>";
    var sortUp = "<div class='sortIcon arrow-up'></div>";
    var sortDown = "<div class='sortIcon arrow-down'></div>";
    var combine = wrap + sortUp + sortDown + "</div>";

    $('input[type=radio]+label').hover(function() {
        var checked = $(this).attr('checked');
        if (checked == false) {
            $(this).append(combine);
        };  
        }, function() { 
            $(this).children('.sortWrap').remove();
    });

Answer 1

Use $(this).is(':checked') or this.checked.

.prop() vs .attr()

The other problem is that this in your handler is the label element, not the checkbox. You need %(this).prev().is(':checked').

DEMO