Question

我正在尝试从多个按钮组中的选定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中提取数据属性，但目前只有radio button中加载的最顶级DOM才会显示为我的输出：

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

谢谢！

Answer 1

每当您使用.attr(key)方法时，它始终会获取第一个匹配元素的值。要从所有匹配元素中获取值，您需要迭代，有各种方法。 .each()可用于迭代并推送数组中的值。

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

＆＃13;

$('.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);
});

＆＃13;

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

＆＃13;

另外，您可以使用Element.dataset属性访问data-*前缀属性，例如

this.dataset.selectionName;

而不是

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

Answer 2

如何

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

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

2 个答案: