CODEWITHSUNDEEP
javascriptjqueryhtml
JGeer
JGeer

Reputation: 1852

Get innerHTML of element with class when radio checked

We have option-list with input type radio.

Now we want to get the innerhtml of the element with class "option-sku" if that main radio is selected.

So when the page loads it should check which radio button is checked and then get the innerhtml of the closest element with class "option-sku".

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

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

That value I want to show inside the span with class "product-option-image".

When selecting the radio button of Product option 2. The value of "SKU1" should be replaced by "SKU2" inside the <span class="product-option-image">

How can we achieve that?

HTML:

<tbody>
    <tr>
        <td class="image" rowspan="8">
            <span class="product-option-image"> <script type="text/javascript">
    document.write(sku)
  </script></span> </span>
        </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>

<script type="text/javascript">
var sku = $(  $("input:checked").prop(".option-sku") ).text()
</script>

Upvotes: 0

Views: 769

Answers (2)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

$(function(){
  console.log($('input:checked').closest('.product-option').find('.option-sku').html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

To make it dynamic try:

$('input[type="checkbox"]').click(function(){
    $(this).closest('.product-option').find('.option-sku').html());
});

Upvotes: 1

Hakim Douib
Hakim Douib

Reputation: 505

In JavaScript just use this code.

  function reloadPrice(target){ 
    let prnt_span = target.parentElement;
    let prnt_li = prnt_span.parentElement;
    // get the innerHtml
    let option_suk = prnt_li.getElementsByClassName("option-sku")[0];
    console.log(option_suk);
  }

and chenge you OnClick event to this 

 <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="reloadPrice(this)" name="options[183]" id="options_182_2" value="590" price="0">

^_^

Upvotes: 0

Related Questions