CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Guillermo Carone
Guillermo Carone

Reputation: 848

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.

Upvotes: 1

Views: 1171

Answers (2)

War10ck
War10ck

Reputation: 12508

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>.

Upvotes: 1

adeneo
adeneo

Reputation: 318312

Iterate over all the checkboxes and set the appropriate classes on each change etc

var boxes = $('.wccf_product_radio').on('change', function() {
    boxes.filter(':checked')
         .closest('li')
         .addClass('checked')
         .siblings('li')
         .removeClass('checked');
});

Upvotes: 3

Related Questions