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();
    });
Improve this question
4
  • 1
    Usually you're a lot better of hiding and showing an element instead of creating it and removing it on every hover event.
    – adeneo
    Commented Apr 22, 2014 at 16:27
  • var is_checked = $(this).is(':checked');
    – user3554382
    Commented Apr 22, 2014 at 16:30
  • Even if there are 15 radio buttons that all require rollovers?
    – Uncle Slug
    Commented Apr 22, 2014 at 16:30
  • Especially when there are many elements to create and remove on every hover.
    – adeneo
    Commented Apr 22, 2014 at 16:33

1 Answer 1

Reset to default
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

Improve this answer
4
  • This still isn't making a difference. I'm only getting a problem when I add the if statement.
    – Uncle Slug
    Commented Apr 22, 2014 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
    Commented Apr 22, 2014 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
    Commented Apr 22, 2014 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
    Commented Apr 22, 2014 at 23:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.