選中/取消選中所有復選框並添加值

Question

我需要檢查/取消選中每套書的所有框。 它還應該添加總價格和重量。 到目前為止，我只能檢查每個方框，並且它添加了很好的值，但是只要我添加一個功能來檢查所有方框，一切都停止工作。

 //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> 

我需要讓它工作的方式是，當選中全部選中時，無論是否選中單個框，它​​都應該添加總價格和重量。 我非常感謝你的幫助，因為我已經堅持了好幾天了。 謝謝！

Answer 1

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);
    }
}

Answer 2

嘗試這個：

$("#checkAll").change(function() {
            $(':checkbox').prop('checked', true); //for check all checkboxes
            $(':checkbox').prop('checked', false); //for uncheck all checkboxes
        });

Answer 3

請檢查此代碼

 $(document).ready(function(){ $("#AllsetA").change(function(){ $(".setA").prop('checked', $(this).prop("checked")); changeval(); }); $("#AllsetB").change(function(){ $(".setB").prop('checked', $(this).prop("checked")); changeval(); }); $(".sum").change(function(){ changeval(); }); var changeval = function() { var totalPrice = 0,totalWeight = 0; var count=0; $( ".sum" ).each(function( index ) { if(this.checked) { totalPrice += parseFloat(this.value); totalWeight += parseFloat(this.getAttribute('Bweight')); count++; } }); if(count<=0) { totalPrice=totalWeight=0; } $("#payment-weight").html(totalWeight); $("#payment-total").html(totalPrice); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><label><input type="checkbox" class="checkAll" id="AllsetA"/> Check all Set A</label></p> <fieldset> <legend>Set A Books</legend> <input value="300" type="checkbox" bweight=".500" id="ENG101" class="sum setA" data-toggle="checkbox"> English <input value="500" type="checkbox" bweight=".330" id="SCI101" class="sum setA" data-toggle="checkbox"> Science <input value="755" type="checkbox" bweight=".633" id="CLE101" class="sum setA" data-toggle="checkbox"> Christian Living </fieldset> <p><label><input type="checkbox" class="checkAll" id="AllsetB"/> Check all Set B</label></p> <fieldset> <legend>Set B Books</legend> <input value="245" type="checkbox" bweight=".845" id="ENG202" class="sum setB" data-toggle="checkbox"> English <input value="534" type="checkbox" bweight=".734" id="SCI202" class="sum setB" data-toggle="checkbox"> Science <input value="623" type="checkbox" bweight=".257" id="CLE202" class="sum setB" data-toggle="checkbox"> Christian Living <input value="954" type="checkbox" bweight=".845" id="MAT101" class="sum setB" 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> 

Answer 4

我會這樣做的。 它似乎不必要地使用循環，但考慮到少量控件這不是問題，它使代碼更容易閱讀。

該代碼支持checkAll功能的輸入更新，反之亦然。

 // Shorter querySelectorAll that returns a real array. function select(selector, parent){ return Array.from((parent||document).querySelectorAll(selector)); } var inputs = select('.sum'), totalElement = document.getElementById('payment-total'), weightElement = document.getElementById('payment-weight'); function sumUpdate(){ totalElement.innerHTML = inputs.reduce(function(result, input){ return result + (input.checked ? parseFloat(input.value) : 0); }, 0).toFixed(2); weightElement.innerHTML = inputs.reduce(function(result, input){ return result + (input.checked ? parseFloat(input.getAttribute('bweight')) : 0); }, 0).toFixed(2); } // Update the sums in function on input change. inputs.forEach(function(input){ input.addEventListener("change", sumUpdate); }); select(".checkAll").forEach(function(checkAll){ var targetFieldSet = document.getElementById(checkAll.getAttribute("data-target-set")); var targetInputs = select(".sum", targetFieldSet); // Update checkAll in function of the inputs on input change. targetInputs.forEach(function(input){ input.addEventListener("change", function(){ checkAll.checked = input.checked && targetInputs.every(function(sibling){ return sibling.checked; }); }); }); // Update the inputs on checkall change, then udpate the sums. checkAll.addEventListener("change", function(){ targetInputs.forEach(function(input){ input.checked = checkAll.checked; }); sumUpdate(); }); }); 

 <p><label><input type="checkbox" class="checkAll" data-target-set="setA"/> Check all Set A</label></p> <fieldset id="setA"> <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" class="checkAll" data-target-set="setB"/> Check all Set B</label></p> <fieldset id="setB"> <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>