Question

I have many div’s called “each_item”, one behind another.
I am trying to check whether a radio has been checked WITHIN this very div.

My problem is that with my jquery code (see below), all radio buttons of all “each_item” div’s are tested. I probably need to use $(this), but I don’t know how to use it in the selector I used below ( that is $('input:radio[name=gender]:checked'))

<div class='each_item'>
<input type='radio' name='gender' value='m'>
<input type='radio' name='gender' value='f'>

<input type='button' id='btn'>
</div>

The jquery i tried is this:

$('#btn').click(function(){

    if ($('input:radio[name=gender]:checked').length < 1)
        alert('nothing was checked');
    });

Thanks a lot if you could help me out.

Answer 1

You can use find to only look within the div. closest will find the nearest ancestor with that class (the containing div).

$('#btn').click(function(){

    if ($(this).closest(".each_item").find('input:radio[name=gender]:checked').length < 1)
        alert('nothing was checked');
    });

});

Also note that if you have multiple buttons with the same id, that is invalid and will likely cause you problems down the line. ids should always be unique.