Jquery - Check Radio Button, Get Specific Label Content

Question

I have spent hours and hours over the last few days trying just about every Stack Overflow snippet I can find to hack this together myself but nothing has worked the way I need it. At this stage, I'm hoping one of you will kindly help me out.

Objective:

I have a list of radio buttons displayed on a order form. I want to extract specific label content from the checked radio input only and save it to a variable i.e "3 Product Name" or "1 Product Name".

$("input:radio").click(function() {
  var label_description = this.parentElement.outerText;
  alert(label_description);
});

//Goal- Extract specific label content from checked radio input e.g "3 Product Name" or "1 Product Name"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="12374747">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">3 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">4 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">6 Product Name - Text here</label>
</div>

<div class="pull-left elOrderProductOptinProductName">
  <input type="radio" id="lbl-01" name="purchase[product_id]" value="839909">
  <div class="pull-right elOrderProductOptinPrice" data-cf-product-price="true" taxamo-currency="USD">$X.XX</div>
  <label for="lbl-01" data-cf-product-name="true">1 Product Name</label>
</div>

JS Fiddle: http://jsfiddle.net/1t1edf8v/5/

As you can see, all I have is working code that pulls out the full label content and the price. I understand why this is happening, I just haven't been able to isolate what I need.

Thanks so much for any help with this!

Answer 1

Simply, use querySelector:

 alert(this.parentElement.querySelector("[data-cf-product-name]").outerText)

updated fiddle: http://jsfiddle.net/1t1edf8v/3/

Please note I am using attribute selector inside querySelector function, if you want you can use some other selector.

To pull out string "3 product name" or any other string only, you can use split function or regEx. You just need some pattern here.

For eg,

var text = this.parentElement.querySelector("[data-cf-product-name]").outerText;
var selected = (text.split("-"))[0].trim();
alert(selected);

Updated fiddle: http://jsfiddle.net/1t1edf8v/8/