textbox values based on checkbox checked/unchecked

Question

My problem is simple not so lengthy as looking like.

I have 7 textboxes having ids text1, text2, text3, text4 and text5, text6, text7 and one checkbox having id check. I am getting value of text1 and text2 by JSON as 10 and 20 and displaing total 30 in text7. Values of text4,text5 and text6 are empty that is these textboxes display "0". text3 and text4 will be autofilled based on checkbox.

When i checked the checkbox then "Points" will be autofilled in text3 and "100" will be autofilled in text4. Now total text7 will show 130. Values of text5 and text6 display "0". If i will write something let's say "10" in text5 and "20" in text6 then total text7 will show 160. If i uncheck the checkbox, then values of text3 and text4 will be removed and total will be changed acordingly.I am not able to know how to autofill text3 and text4 after checking the checkbox, any idea please?

index.jsp

 $(document).ready(function() {
 $("#combo1").change(function() {
 $.getJSON(
    'combo1.jsp', 
    { combo1Val : $(this).val() }, 
    function(data) {
        var a = data.valueoffirsttextbox; //Got 10 from db
        var b = data.valueofsecondtextbox; //Got 20 from db
        var total = parseInt(a) + parseInt(b);
 $("#combo2").val(data.name);
        $("#text1").val(a)
        $("#text2").val(b)
        $("#text7").val(total); // here i am showing total 30 in text7  
    }
  );
// when checkbox is unchecked text4 is not present 
       $("#text1, #text2, #text5, #text6").keyup(function() {// if any editing occurs
 in these values then total will be changed accordingly
 var a = $("#text1").val();
 var b = $("#text2").val();
 var c = $("#text5").val();
 var d = $("#text6").val();
 var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
 $("#text7").val(total);// shows total with out text4's value

// when checkbox is checked then text4's value is added

       $("#text1, #text2, #text4, #text5, #text6").keyup(function() {// if any editing
  occurs in these values then total will be changed accordingly
 var a = $("#text1").val();
 var b = $("#text2").val();
 var c = $("#text5").val();
 var d = $("#text6").val();
//here text4 is added
 var e = $("#text4").val();
 var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d) + parseInt(e) ;
 $("#text7").val(total);// show total with text4's value
 });
 });
 });   

<body>
<input type="checkbox" id=check"/>

<input type="text" id="text1"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>// how can i autofill "POINTS" in this 
textbox after checking the checkbox?
<input type="text" id="text4" value="0"/>//how can i autofill "100" in this textbox 
after checking the checkbox?
<input type="text" id="text5" value="0"/>
<input type="text" id="text6" value="0"/>
<input type="text" id="text7" value="0"/>// shows total of all values of above  
textboxes except text3
</body>

Are the values that you have to show in text3, 4 and likewise fix? — Logan, Feb 15 '12 at 07:50
@AmarPalsapure..i am trying in fiddle, please give me an idea — harry, Feb 15 '12 at 07:57
@Deepak no calculator is required my friend, you can also do it, i am trying to solve , you can also try — harry, Feb 15 '12 at 08:22
A constructive comment: You enclosed all of your code inside of a .change() function, even the 'keyup' function. You should separate them! And you can also create a custom function that will handle all your checks (like in my demo - the 'getValues()'). — Roko C. Buljan, Feb 15 '12 at 11:45

score 3 · Accepted Answer · answered Feb 15 '12 at 08:13

You can check this jsFiddle: http://jsfiddle.net/Af6LP/1/ Modify it according to your needs.

Script

$(document).ready(function() {
  $("#check").change(function() {
      if ($(this).is(":checked")) $("#text4").val("100");
      else $("#text4").val("0");
      calculate();
  });

  $("#text1, #text2, #text5, #text6").keyup(function() {
      calculate();
  });
});

function calculate() {
  var a = $("#text1").val();
  var b = $("#text2").val();
  var c = $("#text5").val();
  var d = $("#text6").val();
  var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
  if ($("#check").is(":checked")) total += parseInt($("#text4").val());
  $("#text7").val(total);
}

HTML

<body>
    <input type="checkbox" id="check"/><br/>
    <input type="text" id="text1" value="10"/><br/>
    <input type="text" id="text2" value="20"/><br/>
    // how can i autofill "POINTS" in this textbox after checking the checkbox?
    <input type="text" id="text3"/><br/>
    //how can i autofill "100" in this textbox after checking the checkbox?
    <input type="text" id="text4" value="0"/><br/>
    <input type="text" id="text5" value="0"/><br/>
    <input type="text" id="text6" value="0"/><br/>
    // shows total of all values of above textboxes except text3<br/>
    <input type="text" id="text7" value="30"/>
</body>

thanks Amar for your response, but POINTS should be written in text3 after checked but it is not happening, another thing is when 100 is filled in text4 then if i will edit this 100 by 200 then total remains same how? total should get changed accordingly, i think slight modification is required in your fiddle, can you please edit your fiddle — harry, Feb 15 '12 at 08:19
thanks Amar well just one more doubt, how can i remove "POINTS" when i am unchecking checkbox like text3's value 100 is being removed — harry, Feb 15 '12 at 10:09
In `$("#check").change(` function i'm resetting the text3. Inside `else $("#text4").val("0");` , if you don't want it remove this. — Amar Palsapure, Feb 15 '12 at 10:13

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Take a look at this solution:

demo jsBin

var a=10; // from database
var b=20; // from database

var e=0;

$("#text1").val(a); // read and set value
$("#text2").val(b); // read and set value
    
function getValues(){
    a = parseInt($("#text1").val(), 10);
    b = parseInt($("#text2").val(), 10);
    var c = parseInt($("#text5").val(), 10);
    var d = parseInt($("#text6").val(), 10);
    doSomeCheck = $('#check').is(':checked') ? e=100 : e=0;
    
    $('#text4').val(e);
    $('#text3').val(a+b);
    $("#text7").val(a+b+c+d+e);
}
getValues();
    
    
$("#check").change(function() { 
    getValues();
});  

$("#text1, #text2, #text4, #text5, #text6").keyup(function() {
    getValues();
    if($(this).val() === '') $('#text7').val('...');
});

@harry no problem! P.S. the '10' in parseInt are the defined radix. Radix are from 2-32 and represent the numeral system to use. — Roko C. Buljan, Feb 15 '12 at 11:39

score 0 · Answer 3 · answered Apr 06 '16 at 22:26

$(document).ready(function() {
$("#check").change(function() {
    if ($(this).is(":checked")) $("#text4").val("100");
    else $("#text4").val("0");
    if ($(this).is(":checked")) $("#text3").val("POINTS");
    else $("#text3").val("");
    calculate();
});

$("#text1, #text2, #text5, #text6").keyup(function() {
    calculate();
});
});

function calculate() {
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
if ($("#check").is(":checked")) total += parseInt($("#text4").val());
$("#text7").val(total);
}

Just had to add another if/else for text3. Simple.

textbox values based on checkbox checked/unchecked

index.jsp

3 Answers3

demo jsBin