Question

Following code has been generated through ajax:

<div class="momento-rating-input">
    <div>Rate this post</div>
    <div>
        <input type="radio" name="rateit" value="3" style="margin: 0 0.5ex 3px;" class="ratems" />Good
        <input type="radio" name="rateit" value="2" style="margin: 0 0.5ex 3px;" class="ratems" />Average
        <input type="radio" name="rateit" value="1" style="margin: 0 0.5ex 3px;" class="ratems" />Bad
    </div>
</div>

Now in Javascript/JQuery, I need to clear selected radios. I try following code.

$('input[type="radio"]').each(function(){
    if($(this).hasClass('ratems')){
        $(this).checked = false;
    }
});

Above code is not working. I know we should use JQuery live or on functions to register events on AJAX generated elements.

However I don’t want to register any event, but to clear radio buttons in on a different event, that is firing without any issue.

How can I clear those radio buttons?

Little context, if needed: This code is implemented on a light box and pressing left/right keys change images. For new image, rating radio buttons should be cleared.

Answer 1

You may try this to uncheck a radio buton with class name ratems

$('input[type="radio"].ratems').prop('checked', false);

instead of using $('input[type="radio"]').each(..)