After attempting to achieve this using jquery (referencing How do I get javascript to run more than once?), some individuals suggested that CSS could provide an easier solution. Currently, I have JS code that dynamically applies and removes the ez-selected class whenever a radio button is selected. This functionality is implemented to swap buttons with images.
I am curious if there is a way to utilize CSS to make the text within the span tag bold when the ez-selected class is added, and then revert it back to its original state when the class is removed? It's important to note that altering the HTML structure is not an option due to constraints within my shopping cart software. Thank you in advance!
EDIT: Is there a specific CSS selector that can style the span element closest to the checked input? While I understand that the + selector targets an element immediately following another element, I am wondering if there is a method to select the next span after a checked radio button, even if that span resides within a different division?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>