berechnen insgesamt auf Checkbox aktiviert

Question

HTML

<div id="catlist"> 
    <input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/> 
    <input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/> 
    <input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/> 
    <input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/> 
    <input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/> 
    <input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/> 
    <input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/> 
    <input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/> 
    <input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label> 
</div> 
<input type="text" id="total" value="0" /> 

Javascript

function calcAndShowTotal(){ 
    var total = 0; 
    $('#catlist :checkbox[checked]').each(function(){ 
     total =+ parseFloat($(this).attr('price')) || 0; 
    }); 
    $('#total').val(total); 
} 

$('#pricelist :checkbox').click(function(){ 
    calcAndShowTotal(); 
}); 

calcAndShowTotal(); 

ich besonderen Wert immer bin. WARUM? Ich versuchte Summe von insgesamt habe ich versucht jquery aber keinen Erfolg ..

Answer 1

• Verwenden $('#catlist :checkbox:checked') Wähler zu wählen ist checked Kästchen
• [] als attribute selector verwendet und es könnte als '[type="checkbox"]' verwendet werden, aber es wird nicht filtern checked Check-Boxen
• + Betreiber nicht vor parseFloat benötigt wird, hat es total =+
• Statt Aufruf Handler sein, nur ändern Handler aufrufen mit .change()

function calcAndShowTotal() { 
 
    var total = 0; 
 
    $('#catlist :checkbox:checked').each(function() { 
 
    total += parseFloat($(this).attr('price')) || 0; 
 
    }); 
 
    $('#total').val(total); 
 
} 
 

 
$('#catlist :checkbox').change(calcAndShowTotal).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="catlist"> 
 
    <input type="checkbox" id="cat_1" value="cat_1" price="1.5" /> 
 
    <label for="cat_1">cat_1</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_2" value="cat_2" price="2" /> 
 
    <label for="cat_2">cat_2</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_3" value="cat_3" price="3.5" /> 
 
    <label for="cat_3">cat_3</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_4" value="cat_4" price="4" /> 
 
    <label for="cat_4">cat_4</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_5" value="cat_5" price="5" /> 
 
    <label for="cat_5">cat_5</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_6" value="cat_6" price="6.5" /> 
 
    <label for="cat_6">cat_6</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_7" value="cat_7" price="7" /> 
 
    <label for="cat_7">cat_7</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_8" value="cat_8" price="8" /> 
 
    <label for="cat_8">cat_8</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_9" value="cat_9" price="9.5" /> 
 
    <label for="cat_9">cat_9</label> 
 
</div> 
 
<input type="text" id="total" value="0" />

Mit Array#reduce

function calcAndShowTotal() { 
 
    var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) { 
 
    return a + +$(b).attr('price') || 0; 
 
    }, 0); 
 
    $('#total').val(total); 
 
} 
 

 
$('#catlist :checkbox').change(calcAndShowTotal).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="catlist"> 
 
    <input type="checkbox" id="cat_1" value="cat_1" price="1.5" /> 
 
    <label for="cat_1">cat_1</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_2" value="cat_2" price="2" /> 
 
    <label for="cat_2">cat_2</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_3" value="cat_3" price="3.5" /> 
 
    <label for="cat_3">cat_3</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_4" value="cat_4" price="4" /> 
 
    <label for="cat_4">cat_4</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_5" value="cat_5" price="5" /> 
 
    <label for="cat_5">cat_5</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_6" value="cat_6" price="6.5" /> 
 
    <label for="cat_6">cat_6</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_7" value="cat_7" price="7" /> 
 
    <label for="cat_7">cat_7</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_8" value="cat_8" price="8" /> 
 
    <label for="cat_8">cat_8</label> 
 
    <br/> 
 
    <input type="checkbox" id="cat_9" value="cat_9" price="9.5" /> 
 
    <label for="cat_9">cat_9</label> 
 
</div> 
 
<input type="text" id="total" value="0" />

Answer 2

Statt Looping Sieverwenden können, der auf das Kontrollkästchen reagiert und das Ereignis ändert. Darüber hinaus müssen Sie addieren oder subtrahieren Wert wie diese += für die Zugabe auf -= zur Subtraktion

var _total = 0; 
$('input[type="checkbox"]').change(function() { 
    if($(this).is(':checked')){ 
    _total += parseFloat($(this).attr('price')) || 0; 
    } 
else{ 
    _total -= parseFloat($(this).attr('price')) || 0; 
} 
$('#total').val(_total); 
}) 

JSFIDDLE

Answer 3

$('input:checkbox').change(function(){ 
var totalprice=0; 
$('input:checkbox:checked').each(function(){ 
totalprice+= parseFloat($(this).attr('price')); 
}); 
$('#total').val(totalprice) 
});