HTML5提供了一種新的方式來獲取表單數據的總價，這一過程非常簡單。我們來看一下以下代碼示例中的實現方式：

表單1：

<form id="form1">
<input type="checkbox" name="item" value="10">商品A 10元
<br>
<input type="checkbox" name="item" value="20">商品B 20元
<br>
<input type="checkbox" name="item" value="30">商品C 30元
<br>
<input type="submit" value="計算總價">
</form>

表單2：

<form id="form2">
<input type="radio" name="item" value="10">商品A 10元
<br>
<input type="radio" name="item" value="20">商品B 20元
<br>
<input type="radio" name="item" value="30">商品C 30元
<br>
<input type="submit" value="計算總價">
</form>

以上兩個表單分別包含了一組商品復選框和單選框以及一個“計算總價”的按鈕。當用戶勾選了不同的商品后點擊“計算總價”按鈕，我們可以通過JavaScript來獲取選中商品的總價。

JavaScript代碼：

<script>
// 獲取表單對象
var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");
// 添加事件監聽器
form1.addEventListener("submit", calculatePrice);
form2.addEventListener("submit", calculatePrice);
// 計算總價函數
function calculatePrice(event) {
event.preventDefault(); // 阻止表單提交
var formData = new FormData(event.target); // 獲取表單數據
var totalPrice = 0;
for(var pair of formData.entries()) {
totalPrice += parseInt(pair[1]);
}
alert("總價為：" + totalPrice + "元");
}
</script>

首先，我們通過getElementById()方法獲取了兩個表單對象，然后分別添加了submit事件監聽器。在calculatePrice()函數中，我們使用FormData類來獲取表單數據。FormData對象提供了一種簡單的方法來獲取表單數據，可以獲取表單中所有選中的復選框和單選框的值，并返回一個鍵值對形式的對象。我們遍歷這個對象，將選中的商品價格相加，最后通過alert()方法來顯示總價。在最后一行，我們使用parseInt()方法將字符串轉換為整數，確保在計算總價時不會出現錯誤。 如此簡單的代碼，就可以輕松地計算出選中商品的總價，極大地簡化了表單數據獲取的流程。