我正在尝试从多个按钮组中选定的radio buttons
检索自定义数据属性并将它们显示给用户。
这是我正在使用的单选按钮
的示例:
<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>
我目前正在使用此 jQuery
从选定的 radio buttons
中提取数据属性,但目前只加载了最顶部的 radio button
在 DOM
中只会显示为我的输出:
var itemNames = [$(".calc:checked").attr("data-selection-name")];
$("#quote-items").text(itemNames)
谢谢!
最佳答案
无论何时使用 .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>
此外,您可以使用 Element.dataset访问 data-*
前缀属性的属性,例如
this.dataset.selectionName;
代替
$(this).attr("data-selection-name");
关于javascript - 显示来自所选单选按钮的自定义 HTML5 数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37728993/