Change class of item with innerhtml of selected input

Question

We have option-list with input type radio.

Now we want to change the class of the element with class "product-option-image", with the innerhtml of the element with class "option-sku" if that one is selected.

So when the page loads the class "product-option-image" should be replaced with the innerhtml of the element with class "option-sku" that is selected.

When clicking on a other input, it should replace that class with the innerhtml of the selected one.

In my current HTML below Product option 1 is selected. Now I want to change the class "product-option-image" with the innerhtml of class "option-sku". So the class of "product-option-image" should be "SKU1".

When selecting the radio button of Product option 2. The class of "SKU1" should be replaced by "SKU2".

How can we achieve that?

HTML:

<tbody>
    <tr>
        <td class="image" rowspan="8">
            <i class="product-option-image"></i>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[183]" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[183]" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>

Current JS:

<script type="text/javascript">
    $(document).ready(function () {
        $('input').click(function () {
            $('input:not(:checked)').closest('.product-option-image').removeClass();
            $('input:checked').closest('.product-option-image').addClass(innerHTML);
        });
        $('input:checked').closest('.product-option-image').addClass(innerHTML);
    });
</script>

Answer 1

I've made a few changes in your html too.

1- If you want only one radio buttons to be selected at a time, name attribute should be same for that group of radio button.

Secondly, you can add a dummy class test to select the element with class product-option-image and then play with its class attribute

Here is the snippet

function test(e){
   var skuText = $(e).closest('li').find(".option-sku").text();
   $(".test").attr('class', 'test').addClass(skuText)
    
   
   
}

.product-option-image{
  color : red;
}
.SKU1{
  color: green;
}
.SKU2{
   color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <i class="product-option-image test">Test</i>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio"  class="radio  validate-one-required-by-name product-custom-option" onclick="test(this)" checked="" name="options" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="test(this)" name="options" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>