Add class to label with class if radio is checked - php

Question

I want to add a class 'checked' to the <span class="label product-option"> when a radio button is checked and remove when a other radio is checked.
How can I extend my code for this?
$htmlValue = $_value->getOptionTypeId();
if ($arraySign) {
$checked = (is_array($configValue) && in_array($htmlValue, $configValue)) ? 'checked' : '';
} else {
$checked = $configValue == $htmlValue ? 'checked' : '';
}
$spanClass = "input-radio";
if ($checked) {
$spanClass = "input-radio checked";
}
$selectHtml .= '<li>' . '<span class="input-radio"><input type="' . $type . '" class="' . $class . ' ' . $require
. ' product-custom-option"'
. ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
. ($this->helper('core')->currencyByStore($_value->getPrice(true), $store, false) ? '0' : ' checked="checked"')
. ' name="options[' . $_option->getId() . ']' . $arraySign . '" id="options_' . $_option->getId()
. '_' . $count . '" value="' . $htmlValue . '" ' . $checked . ' price="'
. $this->helper('core')->currencyByStore($_value->getPrice(true), $store, false) . '" /></span>'
. '<span class="label product-option' . $spanClass . '"><label for="options_' . $_option->getId() . '_' . $count . '"><span class="option-name">'
. $this->escapeHtml($_value->getTitle()) . '</span>' . $priceStr . '</label></span>';
if ($_option->getIsRequire()) {
$selectHtml .= '<script type="text/javascript">' . '$(\'options_' . $_option->getId() . '_'
. $count . '\').advaiceContainer = \'options-' . $_option->getId() . '-container\';'
. '$(\'options_' . $_option->getId() . '_' . $count
. '\').callbackFunction = \'validateOptionsCallback\';' . '</script>';
}
$selectHtml .= '</li>';

Answer 1

Your code shows that you already know how to tell if an element is checked or not, and how to set variables containing class names.
Just extend that logic.
$spanClass = "input-radio";
if ($checked) {
$spanClass = "input-radio checked";
}
...
'<span class="' . $spanClass . '">'

Answer 2

I didn't bother to check you php-code to find out how the html would look like exactly (maybe use Streams next time?), but you need to register an eventhandler like this:
(using jQuery as you seem to already be using it anyways)
$('.input-radio input[type=radio]').change(function() {
// $('.input-radio.checked').removeClass('checked'); // this works if you only have one .input-radio
/* if you want multiple (with different names) */
// note: template string are only available in ES6, if you use earlier versions, use the + to concatinate strings
$(`.input-radio.checked input[type=radio][name=${this.name}]`)
.parents('.input-radio.checked').removeClass('checked');
$(this).parents('.input-radio').addClass('checked');
});
/* This CSS is NOT needed and is only used for effect */
.wrapper span {
display: block;
/* To make them vertically aligned, usually makes no sense for span I know */
}
span.input-radio.checked {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="input-radio checked">
<label>
Radio Button
<input type="radio" name="myRadio" checked/>
</label>
</span>
<span class="input-radio">
<label>
Radio Button
<input type="radio" name="myRadio"/>
</label>
</span>
<span class="input-radio">
<label>
Radio Button
<input type="radio" name="myRadio"/>
</label>
</span>
<span class="input-radio">
<label>
Radio Button
<input type="radio" name="myRadio"/>
</label>
</span>
<span class="input-radio">
<label>
Radio Button
<input type="radio" name="myRadio"/>
</label>
</span>
<span class="input-radio">
<label>
Radio Button
<input type="radio" name="myRadio"/>
</label>
</span>
</div>
As a side note, personally I prefer using data-attributes for things like this instead of classes as that more clearly separates design from function.