Adding class to parent element where sub-child element input value is empty?

Question

When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value="") . How do I do this?

html:

<li>...<li> 
<li>
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li>     

js:

$('#btn-modal-clear').on('click', function() {  
    $('.select-name').multiselect('select', ['']);
    $('.select-name').multiselect('updateButtonText');

    ... .addClass("active"); 

});

So result should be:

html:

<li>...<li> 
<li class="active">
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li> 

Fiddle: https://jsfiddle.net/ewm9pbqv/

Answer 1

You can use .filter() with .addClass() in this case:

$('li').filter(function() { 
   return $(this).find('input:radio').val() == ""; 
}).addClass('active');

Answer 2

尝试这个

$('li input[value=""]').closest("li").addClass('active');