jQuery sum of checkbox and textbox value

Question

jQuery sum of checkbox and textbox value

Get sum of checkbox value on click event is working fine. But I want changes in result accordingly. I change textbox value.

Example here : http://jsfiddle.net/Bhuro/uszwqLra/

<table border="1">
  <tr>
    <td>10
      <input type="checkbox" class="tot_amount" value="10" id="filled-in-box1" onclick="chaked1();">
      <input id="one" type="text">
    </td>
  </tr>
  <tr>
    <td>20
      <input type="checkbox" class="tot_amount" value="20" id="filled-in-box2" onclick="chaked2();">
      <input id="two" type="text">
    </td>
  </tr>
  <tr>
    <td>Total
      <input type="text" id="total1" readonly>
    </td>
  </tr>
</table>

JS

    <script>
    function chaked1(){
    $("#filled-in-box1").click(function(event)
    {
    if(this.checked)
    {
    document.getElementById("one").value=document.getElementById("filled-in-box1").value;
    document.getElementById('one').readOnly = false;
    }
    else
    {
    document.getElementById("one").value="0";
    document.getElementById('one').readOnly = true;
    }

    });
    }
    </script>

    <script>
    function chaked2(){
    $("#filled-in-box2").click(function(event)
    {
    if(this.checked)
    {
    document.getElementById("two").value=document.getElementById("filled-in-box2").value;
    document.getElementById('two').readOnly = false;
    }
    else
    {
    document.getElementById("two").value="0";
    document.getElementById('two').readOnly = true;
    }
    });

    }
    </script>


    <script>
    $(".tot_amount").click(function(event) {
    var total = 0;
    $(".tot_amount:checked").each(function() 
    {
    total += parseInt($(this).val());
    });

    if (total == 0) {
    $('#total1').val('');
    }
    else {
    $('#total1').val(total);
    }
    });
    </script>

Answer 1

You can define a keyup event on the text input and calculate the total relative to the input values.

Following is how it shall be done, but you really need a code refactor..

    $('input[type=text]').keyup(function(){
             var total = 0;
             $(".tot_amount:checked").each(function() 
             {
              total += parseInt($(this).next().val());
              });

              if (total == 0) {
                 $('#total1').val('');
              }
              else {
                 $('#total1').val(total);
             }
});

function chaked1(checkbox){

    if(checkbox.checked)
    {
    document.getElementById("one").value=document.getElementById("filled-in-box1").value;
    document.getElementById('one').readOnly = false;
    }
    else
    {
    document.getElementById("one").value="0";
    document.getElementById('one').readOnly = true;
    }


  
  calculateTotal();
  
    }

    function chaked2(checkbox){

    if(checkbox.checked)
    {
    document.getElementById("two").value=document.getElementById("filled-in-box2").value;
    document.getElementById('two').readOnly = false;
    }
    else
    {
    document.getElementById("two").value="0";
    document.getElementById('two').readOnly = true;
    }

      
      
      calculateTotal();

    }

   // $(".tot_amount").click(function(event) {
   //    calculateTotal();
   // });

    $('input[type=text]').keyup(function(){
         
      calculateTotal();
    });


    function calculateTotal()
    {
      
     var total = 0;
         $(".tot_amount:checked").each(function() 
    {
    total += (parseInt($(this).next().val()) == undefined) ? 0 : parseInt($(this).next().val());
    });
      
      if (total == 0) {
    $('#total1').val('');
    }
    else {
    $('#total1').val(total);
    }
      
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr><td>10<input type="checkbox" class="tot_amount" value="10" id="filled-in-box1" onclick="chaked1(this);"><input id="one" type="text"  ></td></tr>
    <tr><td>20<input type="checkbox" class="tot_amount" value="20" id="filled-in-box2" onclick="chaked2(this);"><input id="two" type="text"  ></td></tr>
    <tr><td>Total<input type="text" id="total1" readonly></td></tr>
    </table>

Answer 2

Here this code show exact result what you wants. if you unchecked checkbox than it will assign your default value.

use this :

      <script>
      $(".tot_amount").click(function(event) {
        var total = 0;
        $(".tot_amount:checked").each(function() 
        {
          var inputVal = $(this).parent().find('input[type="text"]').val();

          if(inputVal != ''){
            total += parseInt(inputVal);
          }else{
            total += parseInt($(this).val());

           $(this).parent().find('input[type="text"]').val($(this).val());
          }
        });

        if (total == 0) {
          $('#total1').val('');
        }
        else {
          $('#total1').val(total);
        }
      });
      </script>