The Goal: I aim to achieve the following outcome. Whenever a user clicks on any of the radio inputs within the div that has the class corp-struct, I want to assign the following class to the parent element two levels up. This means that, in the example below, the class should be added to
<div class="radio radio-primary radio-button"><label>. However, prior to this action, I want to remove this same class from any divs within the corp-struct element.
Everything is functioning as expected except for the removal of class names from other child divs.
let $e = $(e.currentTarget);
if ( $e.hasClass('checked-radio-button')){
$e.parent().parent().removeClass('checked-radio-button')
} else {
$("div#corp-struct>div.radio-button").removeClass('checked-radio-button');
$e.parent().parent().addClass('checked-radio-button');
}
The Query: I only want to append the above class to the element if it hasn't been added already. Simultaneously, I want to ensure that the class is removed from the other three elements within
<div id="corp-struct" class="radio-group container-fluid">**Sample HTML:**
<div class="radio-group container-fluid corp-struct">
<h6>Page Title</h6>
<div class="row">
<div class="col-md-12">
<div class="radio radio-primary radio-button">
<label>
<input type="radio" name="corpStructure" id="corpStructure_subset" value="subset" {{#eq corpStructure "subset"}}checked{{/eq}}></input>
<span class="circle"></span>
<span class="check"></span>
<span class="radio-button-text">{{nls "organization_corpStructure_subset"}}-{{corpStructure}}</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="radio radio-primary radio-button">
<label>
<input type="radio" name="corpStructure" id="corpStructure_subsidiary" value="subsidiary"></input>
<span class="circle"></span>
<span class="check"></span>
<span class="radio-button-text">{{nls "organization_corpStructure_subsidiary"}}</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="radio radio-primary radio-button">
<label>
<input type="radio" name="corpStructure" id="corpStructure_single" value="single"></input>
<span class="circle"></span>
<span class="check"></span>
<span class="radio-button-text">{{nls "organization_corpStructure_single"}}</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="radio radio-primary radio-button">
<label>
<input type="radio" name="corpStructure" id="corpStructure_parent" value="parent"></input>
<span class="circle"></span>
<span class="check"></span>
<span class="radio-button-text">{{nls "organization_corpStructure_parent"}}</span>
</label>
</div>
</div>
</div>
</div>
My Current Progress:
Upon clicking a radio, the class is added correctly. Furthermore, clicking on it again removes the class appropriately. However, if I click on one radio and then on another, both end up having the class instead of only the initial one getting it removed.