gpt4 book ai didi

javascript - 选中/取消选中所有复选框并添加值

转载 作者:行者123 更新时间:2023-11-28 05:59:17 29 4
gpt4 key购买 nike

我需要为每套图书设置一个选中/取消选中全部复选框。它还应该加上总价和重量。到目前为止,我只能选中每个框,它会很好地添加值,但是一旦我添加一个函数来选中所有框,一切都会停止工作。

//check all function (commented it because it does not work)

//$("#checkAll").change(function () {
//$("input:checkbox").prop('checked', $(this).prop("checked"));
//});


// add weight and price
var inputs = document.getElementsByClassName('sum'),
totalElement = document.getElementById('payment-total'),
weightElement = document.getElementById('payment-weight'),
totalPrice = 0,
totalWeight = 0;


for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
if (this.checked) {
totalPrice += parseFloat(this.value);
totalWeight += parseFloat(this.getAttribute('Bweight'));
} else {
totalPrice -= parseFloat(this.value);
totalWeight -= parseFloat(this.getAttribute('Bweight'));
}

totalElement.innerHTML = totalPrice.toFixed(2);
weightElement.innerHTML = totalWeight.toFixed(2);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label><input type="checkbox" id="checkAll"/> Check all Set A</label></p>
<fieldset>
<legend>Set A Books</legend>
<input value="300" type="checkbox" bweight=".500" id="ENG101" class="sum" data-toggle="checkbox"> English
<input value="500" type="checkbox" bweight=".330" id="SCI101" class="sum" data-toggle="checkbox"> Science
<input value="755" type="checkbox" bweight=".633" id="CLE101" class="sum" data-toggle="checkbox"> Christian Living
</fieldset>

<p><label><input type="checkbox" id="checkAll"/> Check all Set B</label></p>
<fieldset>
<legend>Set B Books</legend>
<input value="245" type="checkbox" bweight=".845" id="ENG202" class="sum" data-toggle="checkbox"> English
<input value="534" type="checkbox" bweight=".734" id="SCI202" class="sum" data-toggle="checkbox"> Science
<input value="623" type="checkbox" bweight=".257" id="CLE202" class="sum" data-toggle="checkbox"> Christian Living
<input value="954" type="checkbox" bweight=".845" id="MAT101" class="sum" data-toggle="checkbox"> Math
</fieldset>
<p></p>
<div class="card-charge-info">
Weight <span id="payment-weight">0</span>
</div>
<div class="card-charge-info">
Price <span id="payment-total">0</span>
</div>

我需要让它以某种方式工作,当选择全部选中时,它还应该添加总价格和重量,无论是否选中单个框。我真的很感谢你的帮助,因为我已经被这个问题困扰好几天了。谢谢!

最佳答案

HTML 代码

<p>
<label><input onclick="CheckAll('group1', this);" type="checkbox" id="checkAll" /> Check all Set A</label>
</p>
<fieldset id="group1">
<legend>Set A Books</legend>
<input value="300" type="checkbox" bweight=".500" id="ENG101" class="sum" data-toggle="checkbox"> English
<input value="500" type="checkbox" bweight=".330" id="SCI101" class="sum" data-toggle="checkbox"> Science
<input value="755" type="checkbox" bweight=".633" id="CLE101" class="sum" data-toggle="checkbox"> Christian Living
</fieldset>

<p><label><input onclick="CheckAll('group2', this);" type="checkbox" id="checkAll" /> Check all Set B</label></p>
<fieldset id="group2">
<legend>Set B Books</legend>
<input value="245" type="checkbox" bweight=".845" id="ENG202" class="sum" data-toggle="checkbox"> English
<input value="534" type="checkbox" bweight=".734" id="SCI202" class="sum" data-toggle="checkbox"> Science
<input value="623" type="checkbox" bweight=".257" id="CLE202" class="sum" data-toggle="checkbox"> Christian Living
<input value="954" type="checkbox" bweight=".845" id="MAT101" class="sum" data-toggle="checkbox"> Math
</fieldset>
<p></p>
<div class="card-charge-info">
Weight <span id="payment-weight">0</span>
</div>
<div class="card-charge-info">
Price <span id="payment-total">0</span>
</div>

Java 脚本代码

var inputs = document.getElementsByClassName('sum'),
totalElement = document.getElementById('payment-total'),
weightElement = document.getElementById('payment-weight'),
totalPrice = 0,
totalWeight = 0;


for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function () {
if (this.checked) {
totalPrice += parseFloat(this.value);
totalWeight += parseFloat(this.getAttribute('Bweight'));
} else {
totalPrice -= parseFloat(this.value);
totalWeight -= parseFloat(this.getAttribute('Bweight'));
}

totalElement.innerHTML = totalPrice.toFixed(2);
weightElement.innerHTML = totalWeight.toFixed(2);
}
}

function CheckAll(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++) {
if (inputElements[i].type != 'checkbox')
continue;

inputElements[i].checked = sourceCheckbox.checked;

if (sourceCheckbox.checked) {
totalPrice += parseFloat(inputElements[i].value);
totalWeight += parseFloat(inputElements[i].getAttribute('Bweight'));
} else {
totalPrice -= parseFloat(inputElements[i].value);
totalWeight -= parseFloat(inputElements[i].getAttribute('Bweight'));
}
totalElement.innerHTML = totalPrice.toFixed(2);
weightElement.innerHTML = totalWeight.toFixed(2);
}
}

关于javascript - 选中/取消选中所有复选框并添加值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37409976/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com