すべてのチェックボックスをオン/オフにして値を追加します

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(){ 
 
\t \t \t 
 
    $("#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 \t 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>

をご確認ください210

Answer 4

私はこれを行うだけです。不必要にループを使用するように思えるかもしれませんが、少量のコントロールを考慮するとこれは問題ではなく、コードを読みやすくします。

このコードでは、checkAll関数の入力更新をサポートしています。 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>