Javascript 从所选单选按钮显示自定义HTML5数据属性

我正试图从多个按钮组中的选定

单选按钮

中检索自定义数据属性，并为用户显示它们

下面是我正在使用的

单选按钮的示例：

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

谢谢
 无论何时使用
.attr（key）
方法，它都会获取第一个匹配元素的值。要从所有匹配的元素中获取值，您需要迭代，有多种方法可用于此
.each（）
可用于迭代和推送数组中的值

在这里，我使用了
.map（）
来获取复选框的属性值数组


$（'.calc'）.change（函数（）{
var itemNames=$（“.calc:checked”）.map（函数（）{
返回$（this.attr（“数据选择名称”）
})
.get（）//获取一个数组
.join（“，”）//生成逗号分隔字符串；
$（“#报价项目”）。文本（项目名称）；
});

如何

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

只需附带说明：返回相应的
数据（无论您想要什么）
属性值，这样您就可以使用
$（this）.data（“选择名称”）
而不是
$（this）.attr（“数据选择名称”）
@CliffBurton，非常有效，我更喜欢
元素.dataset
属性
<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);