Get selected radio button on selected in function in jQuery

Question

I have the following markup:

    <div class="secondary-filter" onclick="searchByFilter()">
        <ul class="secondary-filter__list">
            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
                <label for="secondaryFilter-all">All</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
                <label for="secondaryFilter-quoted">Marked</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
                <label for="secondaryFilter-unquoted">Pending</label>
            </li>
        </ul>
    </div>

How can I obtained the label of the checked radio button in the following function?

function searchByFilter() {
    var x = $("input[name='secondaryFilter']").find('input:checked');

    console.log(x.val());
}

I'm trying this.. but it's not working. Please help.

Answer 1

Your $("input[name='secondaryFilter']") creates a jQuery object if <input> elements, but .find only searches through descendants - the input elements don't have any descendants, rather you want to get the matching <input> in the current collection.

You should also attach the event listener using Javascript rather than in an HTML attribute. By listening for change events, you'll have events that only fire when one of the inputs change, rather than when anywhere in the container is clicked.

Also, probably best to have the label next to each input have its for attribute match the id of the input - that way, when clicking the label, the input will be checked - eg, change

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>

to

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
                            ^^^^^^

While you could use .filter instead, to find the element in the current jQuery object matching the condition:

 $("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']").filter('input:checked'); console.log(x.val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

It would be easier to just put the :checked into the first selector string:

const checkedInput = $("input[name='secondaryFilter']:checked");

 $("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']:checked"); console.log(x.val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

Answer 2

To make this work attach a change event handler directly to the radio elements. Then you can get $(this).val() from it when the event occurs. You can also use next().text() to get the value shown in the label , although given that the radio value and innerText of the label are the same, this seems a little redundant.

Also note that the for attributes of the label elements need to match the id of the targeted radio , so I've fixed the HTML there too.

 $('.secondary-filter:radio').on('change', function() { var $radio = $(this); var $label = $radio.next(); console.log(`value: ${$radio.val()}, label: ${$label.text()}`); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

Answer 3

Use

input[name='secondaryFilter']:checked" ,'.secondary-filter'

It will check for checked radio button inside the class of the div

 function searchByFilter() { var x = $("input[name='secondaryFilter']:checked",'.secondary-filter') console.log(x.val()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter" onclick="searchByFilter()"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-quoted">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-unquoted">Pending</label> </li> </ul> </div>

Answer 4

var x = $('input[name=secondaryFilter]:checked').val()