How to find which radio Button is selected after a div

Question

How can I find which radio button is selected after a precise div?

This is an Example:

<div class="largelines">
    <p class="line">OPTION 1</p>
    <div class="delete">
        <a href="#" title="Delete"></a>
    </div>
    <fieldset>
        <input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
        <input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
    </fieldset>
</div>

Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?

Thanks in advance.

Answer 1

If there is just bunch of radio button you would like to check are checked or not you can do something like this

$(document).ready(function(){
    $('.delete').on('click', function(){
        $(document).find('input[type=radio]').each(function(){
            if($(this).get(0).checked){
                //do something
            }
        });
    });
});

Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:

$(document).ready(function(){
    $('.delete').on('click', function(){
        var $parent = $(this).parents('.largelines');
        $parent.find('input[type=radio]').each(function(){
            if($(this).get(0).checked){
                //do something
            }
        });
    });
});

There is bunch of other ways to do that, another one is using next() or siblings() function:

$(document).ready(function(){
    $('.delete').on('click', function(){
        var $fieldset= $(this).next('fieldset');
        //var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
        $fieldset.find('input[type=radio]').each(function(){
            if($(this).get(0).checked){
                //do something
            }
        });
    });
});

Answer 2

This find only checked radio under .largelines scope of clicked .delete element.

$(function () {
  $(document).on('click', '.delete', function () {
    var isChecked = $('input:radio:checked', $(this).parent()).length > 0
    alert(isChecked)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
    <p class="line">OPTION 1</p>
    <div class="delete">
        <a href="#" title="Delete">Check 1</a>
    </div>
    <fieldset>
        <input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
        <input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
    </fieldset>
</div>
<hr>
<div class="largelines">
    <p class="line">OPTION 2</p>
    <div class="delete">
        <a href="#" title="Delete">Check 2</a>
    </div>
    <fieldset>
        <input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
        <input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
    </fieldset>
</div>