顯示來自選定單選按鈕的自定義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數據屬性

回答

相關問題