Guillermo Carone Guillermo Carone - 2 months ago 9
Javascript Question

How to add a class to parent <li> of selected radio button with JS

I have a series input fields in a form that I have no access to because it’s dynamically created by a plugin. The code looks like this:

<!-- section 1 -->
<div>
<ul>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
</ul>
</div>

<!-- section 2 -->
<div>
<ul>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budget_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budgete_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budget_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
</ul>
</div>


I want to add the .checked class to the
<li>
elements that contain a checked radio button.

So far this is the closest I’ve gotten to getting it to work:

// Radio buttons for PEOPLE
$('input[name="wccf[product][people]"]').on('click', function() {
$(".checked").removeClass("checked");
$(this).parent().toggleClass("checked");
});

// Radio buttons for BUDGET
$('input[name="wccf[product][budget]"]').on('click', function() {
$(".checked").removeClass("checked");
$(this).parent().toggleClass("checked");
});


The problem is as soon as I select an element on the second section the one that was checked on the first section gets unchecked and viceversa.

Answer

The problem is with the selector $('.checked'). This selector is not bound to the content of a specific ul. Instead, it's traversing the entire DOM for the class, removing it and then setting it on the current parent. Try altering your code like this:

$('input[name="wccf[product][people], input[name="wccf[product][budget]"]').on('click', function() {
    $(this).parent()
        .siblings('.checked')
        .removeClass('checked')
        .end()
        .addClass('checked');
});

You should also note that the <input /> element is self closing and does not require an end tag </input>.

Comments