0

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();
    });
Uncle Slug
  • 853
  • 1
  • 13
  • 26

1 Answers1

2

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

Community
  • 1
  • 1
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • This still isn't making a difference. I'm only getting a problem when I add the if statement. – Uncle Slug Apr 22 '14 at 16:51
  • The problem isn't the `if` statement, it's the assignment to `checked`. I noticed this when I stepped through the code in the debugger, it was setting `checked` to `undefined`. That's when I realized you were trying to get the `checked` property of the `label`. – Barmar Apr 22 '14 at 17:08
  • 1
    For what it's worth, I've had much better success with is(':checked') than I've had with prop('checked'). – Dave Apr 22 '14 at 17:16
  • Thanks, this makes sense now. I had the default radio buttons set to hide in CSS so I could style custom buttons. – Uncle Slug Apr 22 '14 at 23:29