javascript - 更改元素值时更新复选框状态
问题描述
我是 Web 开发的初学者，我正在开发一个网页，在那里我可以买到一些书籍产品。
每本书的数量在 1-5 之间，这意味着您可以获得 1-5 本。
如果我选择一个产品并选择一个金额，我希望自动选中该产品的复选框。
但是，当我更改产品数量时，我的代码会选中页面中的每个复选框。
我的代码：
function updatetotal() {
var quantities = document.getElementsByClassName("amn");
var sum = 0;
var floatprice = parseFloat("9.99");
var sm = document.getElementById("thesum");
var boxes = document.getElementsByClassName("bought");
for (var i = 0; i < 6; i++) {
if (quantities[i].value != null) { //this is were all boxes in the page are checked and I want only the boxes with amounts not null to be checked
boxes[i].checked = true;
}
sum += quantities[i].value * floatprice;
}
sm.innerHTML = sum.toString(); //put the sum next to the cart
}<!-- a shopping cart which displays my product sum -->
<img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products) <!-- I have a total of six books -->
<div id="p-float">
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
<div class="p-name">Subtle Art of not giving an F</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\everything.jpg" alt = every/ ><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" onchange = "updatetotal()" class = "amn" name = "num" value = "amount" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
<div class="p-name">Deep </br>Work </div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
<div class="p-name">Awaken the giant within</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\habits.jpg" alt = hbts/ ><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class = "amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me" /> Buy Me </div></center>
</div></div>
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\anything.jpg" alt = any/ ><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
</div>解决方案
这是一个使用委托的版本
我假设 id=p-float 是顶部容器，我从 p-price div 中获取价格
我删除了一些</br>，<br/>它们是不需要的，其中一些不是有效的 HTML，妨碍了下一个和上一个 ElementSiblings
我将中心更改为 CSS 并删除了内联 onclick
我已经引用了图像alt属性
window.addEventListener("load", function() { // on page load
const sm = document.getElementById("thesum"); // this never changes
document.getElementById("p-float").addEventListener("input", function(e) { // I assume p-float is the top container
const tgt = e.target; // this is the item that changed
if (tgt.classList.contains("amn")) { // is it an "amn"?
const val = +tgt.value;
const parent = tgt.parentNode; // get the div it sits in
parent.nextElementSibling.querySelector(".bought").checked = val > 0; // set the relative checkbox
}
let sum = 0;
[...document.querySelectorAll(".amn")].forEach(amn => { // sum all amns
const parent = amn.parentNode;
let floatprice = parseFloat(parent.previousElementSibling.textContent.slice(1)); // take the price from the price above
sum += +amn.value * floatprice;
})
sm.innerHTML = sum.toString(); //put the sum next to the cart
});
});.p-float-in {
text-align: center;
}
.p-float img { height: 120px }<!-- a shopping cart which displays my product sum -->
<img src="http://icons.iconarchive.com/icons/fasticon/shop-cart/48/shop-cart-apply-icon.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products)
<!-- an instance of a product (I have a total of six books) -->
<div id="p-float">
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://www.deslegte.com/images/cached/resample/jpg/data/uploads/594/900/cms_visual_1150794.jpg_1552736675000_594x900.jpg" alt="subtle_art" /><br/>
<div class="p-name">Subtle Art of not giving a F</div>
<div class="p-price">$7.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://s.s-bol.com/imgbase0/imagebase3/large/FC/8/8/5/6/9200000095426588.jpg" alt="every" /><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$8.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount" min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/DpVDn5wMm6q/450x840.jpg" alt="deepw" /><br/>
<div class="p-name">Deep </br>Work </div>
<div class="p-price">$9.99</div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/RWmgDpyPwZw/550x836.jpg" alt "gnt"/><br/>
<div class="p-name">Awaken the giant within</div>
<div class="p-price">$10.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/YEpBRDx0979Y/550x839.jpg" /><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$29.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/Ykq6ykYR1DO/550x839.jpg" alt="any" /><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$39.99</div>
<div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal()" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
</div>jQuery版本
$(function() { // on page load
const $sm = $("#thesum"); // this never changes
$("#p-float").on("input", ".amn", function(e) { // I assume p-float is the top container
const val = +this.value;
$(this).closest(".p-float-in").find(".bought").attr("checked",val > 0); // set the relative checkbox
let sum = 0;
$(".amn").each(function() { // using .map here could be interesting too
let floatprice = parseFloat($(this).closest(".p-float-in").find(".p-price").text().slice(1)); // take the price from the price above
sum += +this.value * floatprice;
})
$sm.html("$"+sum.toString()); //put the sum next to the cart
});
});.p-float-in {
text-align: center;
}
.p-float img { height: 120px }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- a shopping cart which displays my product sum -->
<img src="http://icons.iconarchive.com/icons/fasticon/shop-cart/48/shop-cart-apply-icon.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products)
<!-- an instance of a product (I have a total of six books) -->
<div id="p-float">
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://www.deslegte.com/images/cached/resample/jpg/data/uploads/594/900/cms_visual_1150794.jpg_1552736675000_594x900.jpg" alt="subtle_art" /><br/>
<div class="p-name">Subtle Art of not giving a F</div>
<div class="p-price">$7.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://s.s-bol.com/imgbase0/imagebase3/large/FC/8/8/5/6/9200000095426588.jpg" alt="every" /><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$8.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount" min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/DpVDn5wMm6q/450x840.jpg" alt="deepw" /><br/>
<div class="p-name">Deep </br>Work </div>
<div class="p-price">$9.99</div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/RWmgDpyPwZw/550x836.jpg" alt "gnt"/><br/>
<div class="p-name">Awaken the giant within</div>
<div class="p-price">$10.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/YEpBRDx0979Y/550x839.jpg" /><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$29.99</div>
<div class="amount"> Amount:<input type="number" class="amn" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
<div class="p-float">
<div class="p-float-in">
<img class="p-img" src="https://media.s-bol.com/Ykq6ykYR1DO/550x839.jpg" alt="any" /><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$39.99</div>
<div class="amount"> Amount:<input type="number" class="amn" onchange="updatetotal()" name="num" value="amount " min="1" max="5" /> </div>
<div class="buyme"> <input type="checkbox" class="bought" name="box" value="buy me" /> Buy Me </div>
</div>
</div>
</div>推荐阅读
- ios - 当 Rails 解析其提交的参数时，SwiftUI 总是将字段值提交为 Optional
- c# - 插入值后刷新 DataGridView
- sql-server - SQL Server 未捕获链接服务器超时错误
- ios - UISplitViewController - 在 iPad Portrait 中展开和折叠主视图
- python - 为什么列表推导不适用于使用等号更新字典元素
- pandas - 回填和增量一？
- swift - 在将 textField 传递给函数之前如何测试它是否为空：
- python - 当 content_type 是字典时，单元测试很热门
- node.js - 大文件不会传输到 Elastic Beanstalk 托管应用程序
- javascript - 覆盖 JS 原型函数