Display custom HTML5 data attributes from selected radio buttons

Question

I am attempting to retrieve custom data attributes from selected radio buttons from multiple button groups and display them for the user.

Here is an example of the radio buttons I am working with:

<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool"/>
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool"/>

<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping"/>
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping"/>

<span id="quote-items" name="quote-items"></span>

I am currently using this jQuery to extract the data attributes from the selected radio buttons but currently only the top-most radio button loaded in the DOM will only display as my output:

var itemNames = [$(".calc:checked").attr("data-selection-name")];
  $("#quote-items").text(itemNames)

Thanks!

Answer 1

Whenever you use .attr(key) method it will always fetch you the value of first matched element. To get the value from all matched element, you need to iterate, there are various methods for that. .each() can be used to iterate and push the value in an array.

Here I have used .map() to get an array of attribute value for checked checkbox

 $('.calc').change(function() { var itemNames = $(".calc:checked").map(function() { return $(this).attr("data-selection-name") }) .get() //Get an array .join(',') //Generate Comma seperate string; $("#quote-items").text(itemNames); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool" /> <input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool" /> <input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping" /> <input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping" /> <span id="quote-items" name="quote-items"></span> 

Additionaly, You can use Element.dataset property to access data-* prefixed attribute like

this.dataset.selectionName;

instead of

$(this).attr("data-selection-name");

Answer 2

How to

<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="productname" ata-selection-price="productprice" />

$("#sonuc-v2").text(data-selection-price);
$("#sonuc-v2").text(data-selection-price);