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>

Possible duplicate of JQuery sum using checkbox value and textbox value — Insane Skull
– Insane Skull, Commented Oct 5, 2015 at 6:42
If both(checkbox and textbox) will filled than what will be output? — Roli Agrawal
– Roli Agrawal, Commented Oct 5, 2015 at 6:48
you have to handle textbox change events and do sum of value accordingly. — Krupesh Kotecha
– Krupesh Kotecha, Commented Oct 5, 2015 at 6:59

KAD · Accepted Answer · 2015-10-05 07:11:37Z

2

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>

edited Oct 5, 2015 at 7:11

answered Oct 5, 2015 at 6:55

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RajkotBhuro Over a year ago

i Want to output This but Some Problam chaked chackbox after change value then ok... then after unchaked then problam...see it

RajkotBhuro Over a year ago

Thak you So Mutch. For Help Mr.@KAD

KAD Over a year ago

I have updated the code and changed some basic calls, you do not need to identify click events inside your functions, you can just define them in the global scope, I have also sent the checkbox reference as parameter to the checkbox change functions.. You are welcome dude

Yogesh Shakya · Accepted Answer · 2015-10-05 06:58:11Z

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>

Collectives™ on Stack Overflow

jQuery sum of checkbox and textbox value

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related