JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

Check ALL<input type="checkbox" name="checker" id="checkAll"/>
<br/>
Amount1<input type="checkbox" class="checkItem"/>
<input type="text" id="amount0" value="12">
    <br/>
    Amount2<input type="checkbox" class="checkItem"/>
<input type="text" id="amount1" value="17">
    <br/>
    Amount3<input type="checkbox" class="checkItem"/>
<input type="text" id="amount2" value="18">
    <br/>
    Amount4<input type="checkbox" class="checkItem"/>
<input type="text" id="amount3" value="15">
    
     <br/> <br/> <br/>
    <input type="text" id="totalAmountFake"/>

JavaScript

function ChangeToRupiah(angka){
    var rev     = parseInt(angka, 10).toString().split("").reverse().join("");
    var rev2    = "";
    for(var i = 0; i < rev.length; i++){
        rev2  += rev[i];
        if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
            rev2 += ".";
        }
    }
    return rev2.split("").reverse().join("") + ",00";
}
//var sum;
$(document).ready(function() {
    /* var sum=0; */
    $('#checkAll').click(function(event) {  //on click 
        if(this.checked) { // check select status
            var i = 0;
            var sum = 0;
            $('.checkItem').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"
                sum = sum + parseInt($('#amount'+i).val());

                i++;
            });


        }else{
            $('.checkItem').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       

            });  
            sum=0;
            i=0;
        }
        $('#totalRecord').val(i);
        $('#totalAmount').val(sum);
        $('#totalAmountFake').val(ChangeToRupiah(sum));
    });
});