使用js和jquery从复选框中获取值
[英]Get value from checkbox with js and jquery
问题描述
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./script.js"></script>
</head>
<body>
<span id="totalPrice">Value</span>
<span id="productId1">1000</span>
<span id="productId2">2222</span>
<span id="productId3">2222</span>
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>
<input type="button" id="addButton" value="Add"/>
</body>
</html>
如果我点击复选框，那么我会得到它的值并连接。 结果，我得到了我想要从中获取值并总结的跨度的 id。 之后，在 span 中显示全部金额
这是我的 js 代码：
$(function(){
var totalPrice = $('#totalPrice');
var boxes = $('input[type=checkbox]')
var totalPriceNow = 0;
boxes.click(function() {
totalPriceNow = 0;
boxes.each(function() {
if (this.checked) {
var productId = 'productId';
productId += this.value;
var productPrice = $('#' + 'productId').text();
totalPriceNow += parseInt(productPrice);
}
});
totalPrice.text(totalPriceNow);
});
})
2 个解决方案
解决方案1
0 2021-01-22 00:41:46
// listen for change event on any "selected" checkbox $(document).on('change', '[name="selected"]', function () { // get selected checkbox values as array of numbers var selectedValues = $('[name="selected"]:checked').map(function () { // convert value from string to number return Number($(this).val()); }).get(); // add prices together to get total price var totalPrice = selectedValues.reduce(function (total, price) { return total + price; }, 0); $('#totalPrice').html(totalPrice); })
<:DOCTYPE html> <html lang="en" xmlns:th="http.//www.w3:org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https.//code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <span id="totalPrice">0</span> <input type="checkbox" name="selected" value="1"> <input type="checkbox" name="selected" value="2"> <input type="checkbox" name="selected" value="3"> </body> </html>
解决方案2
0 已采纳 2021-01-22 04:09:22
每当change任何复选框时，您都可以遍历所有选中的复选框并将总和添加到某个变量，最后将此值添加到您的totalPrice 。
演示代码：
$('input[type=checkbox]').change(function() { var totalPriceNow = 0; //loop through checked checkboxes $('input[type=checkbox]:checked').each(function() { var productId = 'productId' + this.value; totalPriceNow += parseInt($('#' + productId).text().trim()); //get text }) $('#totalPrice').text(totalPriceNow); });
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <span id="totalPrice">Value</span> <span id="productId1">1000</span> <span id="productId2">2222</span> <span id="productId3">2222</span> <input type="checkbox" value="1" /> <input type="checkbox" value="2" /> <input type="checkbox" value="3" /> <input type="button" id="addButton" value="Add" />
如何从复选框获取价值？ 在Angular JS中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.