資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 計算單選按鈕值的總和？
如何使用jQuery計算總和
使用jQuery計算單選按鈕值的總和，需要選擇單選按鈕並附加一個點選事件監聽器。當點選單選按鈕時，會檢索每個選定單選按鈕的值並加在一起。然後，使用jQuery的text()方法將結果總和顯示在指定的元素中。此過程允許輕鬆計算和顯示網頁上單選按鈕值的總和。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('input[type="radio"]').click(function() {
$('#sum').text($('input[name="option1"]:checked').val()*1 + $('input[name="option2"]:checked').val()*1);
});
});
</script>
</head>
<body>
<div style="display: flex;">
<div>
<form>
<label><input type="radio" name="option1" value="10" checked>10</label><br>
<label><input type="radio" name="option1" value="20">20</label><br>
</form>
</div>
<div>
<form>
<label><input type="radio" name="option2" value="100" checked>100</label><br>
<label><input type="radio" name="option2" value="200">200</label><br>
</form>
</div>
</div>
<div>
Sum: <span id="sum">15</span>
</div>
</body>
</html>
解釋
該指令碼使用jQuery的$(function() {})簡寫形式代替$(document).ready()函式，在文件完全載入後執行程式碼。
click()函式附加到所有單選按鈕，並在單擊任何一個時觸發。它計算選定單選按鈕值的總和，並使用text()函式將其顯示在#sum span元素中。使用val()函式獲取選定單選按鈕的值，並乘以1以確保將其視為數字，從而簡化了總和計算。
結論
在這篇文章中，我們瞭解瞭如何使用jQuery計算單選按鈕的總和。總而言之，使用jQuery計算單選按鈕值的總和是一個簡單的過程，它涉及為每個單選按鈕賦值，使用jQuery選擇選中的按鈕，然後將它們的值加起來。然後可以將結果總和顯示在網頁上。
更新於：2023年4月17日
639 次瀏覽
廣告