显示来自选定单选按钮的自定义HTML5数据属性

我试图从多个按钮组中选定的radio buttons中检索自定义数据属性并将它们显示给用户。显示来自选定单选按钮的自定义HTML5数据属性

这里是我一起工作的radio buttons的例子：我目前使用这个jQuery提取从选定radio buttons的数据属性，但目前只装载在DOM最上面的radio button

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

将只显示为我的输出：

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

谢谢！

来源

2016-06-09 Cory

无论何时你使用.attr(key)方法，它总是会提取你第一个匹配元素的值。为了从所有匹配的元素中获取值，需要迭代，有多种方法。 .each()可用于迭代和推送数组中的值。

在这里，我已经使用.map()获得属性值的数组，选中的复选框

$('.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，您可以使用Element.dataset属性来访问data-*像

this.dataset.selectionName;

前缀属性代替

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

来源

2016-06-09 14:41:47 Satpal

只是一个侧注：['数据（）'方法]（https://api.jquery.com/jquery.data /）返回相应的'data-whatever-want-want'属性值，所以你可以使用'$（this）.data（“selection-name”）'而不是'$（this）.attr（“data-selection-名称“） –

@ CliffBurton，非常有效的一点，我更喜欢'Element.dataset'属性 – Satpal

如何

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

来源

2017-11-10 11:01:05

显示来自选定单选按钮的自定义HTML5数据属性

回答

相关问题