![](/img/trans.png)
[英]Getting HTML5 custom data-* attributes from radio buttons on form submit
[英]Display custom HTML5 data attributes from selected radio buttons
我试图从多个按钮组的选定radio buttons
检索自定义数据属性,并为用户显示它们。
以下是我正在使用的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
提取数据属性,但目前只有DOM
加载的最顶层的radio button
才会显示为我的输出:
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-*
prefixed属性之类的
this.dataset.selectionName;
代替
$(this).attr("data-selection-name");
如何
<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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.