如何使用 jQuery 计算单选按钮值的总和?
jqueryweb developmentfront end technology
如何使用 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 选中选中的按钮，然后计算它们的值之和即可。最终的结果就可以显示在网页上。
