Adding values in a checkbox, textbox and select using javascript

Question

How will I add my checkbox value to the list of being added? If it is checked, it will be added to the total, if unchecked it will not be added. Or if it is already checked, then the customer unchecked it it will be deducted from the total.

javascript

function subtotal(){
$("#as").on('change',function(event){
    var as = $(event.target).val();
    var txt1 = $('#sff').val();
    var txt2 = $('#osf').val();
    var d = 0;

    if ($('#cbx3').is(":checked")) {
        d = parseFloat($("#cbx3").val(), 10);

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;


    $('#st').val(total.toFixed(2));  
}); 

HTML

<input type="text" id="txt1"/> //automatically shows value depending on a dropdownmenu
<input type="text" id="txt2"/> /automatically shows value depending on a dropdownmenu
<input type="text" id="gt"/> //this is where the answers shows

<input type="checkbox" id="cbx3"/>

<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>

the total should be equivalent to, textbox1 + textbox2 + dropdownmenu + checkbox I have managed to add the textboxes and dropdown, the concern now is the checkbox.

thankyou...

Answer 1

your html is not clear.. please read comment line carefully and try this..

$("#as").on('change',function(){ 
    var as = $(this).val(); //selected value on dropdown change
    var txt1 = $('#sff').val(); // need to give the id of html element(not in your given html)
    var txt2 = $('#osf').val(); // need to give the id of html element(not in your given html)
    var d = 0;

    if ($('#cbx3').is(":checked")) 
        d = parseFloat($("#cbx3").val(), 10); //it get the value from cbx3 element when it is checked otherwise value is 0

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;

  $('#gt').val(total.toFixed(2));  
});

Answer 2

You should have the calculation in a function that is called whenever the dropdown or the checkbox are changed. You can call the same function when initializing.

function subtotal(){
    var as = $("#as").val();
    var txt1 = $('#sff').val();
    var txt2 = $('#osf').val();
    var d = 0;

    if ($('#cbx3').is(":checked")) {
        d = parseFloat($("#cbx3").val(), 10);

    var a = parseFloat(as, 10);
    var b = parseFloat(txt1, 10);
    var c = parseFloat(txt2, 10);
    var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;


    $('#st').val(total.toFixed(2));  
}; 

$("#as").on('change',function(event){
    subtotal();
}

$('#cbx3').click(function(){
    subtotal();
});

Answer 3

After fixing ids of relevant items, this code calculates result

 $("#as").on('change', function(event) { var as = $(event.target).val(); var txt1 = 0; var txt2 = 0; if ($('#txt1').val()) txt1 = $('#txt1').val(); if ($('#txt2').val()) txt2 = $('#txt2').val(); var d = 0; if ($('#cbx3').is(":checked")) { d = parseFloat($("#cbx3").val(), 10); } var a = parseFloat(as, 10); var b = parseFloat(txt1, 10); var c = parseFloat(txt2, 10); var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d; $('#gt').val(total.toFixed(2)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txt1" /> <br /> <input type="text" id="txt2" /> <br /> <input type="text" id="gt" /> <br /> <input type="checkbox" id="cbx3" value="5" /> <br /> <select id="as"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select> <br /> 

Answer 4

js fiddle example

$("#as").on('change', function (event) {
            subtotal();
        });
        $("#cbx3").click(function () {
            subtotal();
        });

        function subtotal() {

            var as = $("#as").val();
            var txt1 = $('#txt1').val();
            var txt2 = $('#txt2').val();
            var d = 0;
            if ($('#cbx3').is(":checked")) {
                d = parseFloat($("#cbx3").val(), 10);
                var a = parseFloat(as, 10);
                var b = parseFloat(txt1, 10);
                var c = parseFloat(txt2, 10);
                var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
                $('#gt').val(total);
            }
            else {
                $('#gt').val("0");
            }
        }

Try this above code

Answer 5

This should give you an idea.

 (function () { var $txt1 = $('#txt1'); var $txt2 = $('#txt2'); var $as = $('#as'); var $cbx3 = $('#cbx3'); var total = 0; function calc() { var as = Number($as.val()); var txt1 = Number($txt1.val()); var txt2 = Number($txt2.val()); total = txt1 + txt2; if ($cbx3.is(":checked")) { total += as; } $('#gt').val(total.toFixed(2)); } $('#txt1, #txt2, #as').on('keyup', function () { calc(); }); $('#cbx3, #as').on('change', function () { calc(); }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><input type="text" id="txt1" /></div> <div><input type="text" id="txt2" /></div> <div><input type="text" id="gt" /></div> <input type="checkbox" id="cbx3" /> <select id="as"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select>