关于javascript：基于复选框选中/取消选中的文本框值


textbox values based on checkbox checked/unchecked

我的问题很简单，不像看上去那么长。

我有7个文本框具有ID text1、text2、text3、text4和text5、text6、text7，还有一个复选框具有ID检查。我通过json得到text1和text2的值为10和20，并在text7中显示总共30个。text4、text5和text6的值为空，即这些文本框显示"0"。text3和text4将根据复选框自动填充。

当我选中复选框时，"点"将在文本3中自动填充，"100"将在文本4中自动填充。现在，总文本7将显示130。text5和text6的值显示"0"。如果我要写一些东西，让我们在text5中说"10"，在text6中说"20"，那么总text7将显示160。如果取消选中该复选框，则会删除text3和text4的值，并相应地更改总计。选中该复选框后，我不知道如何自动填充text3和text4，有什么想法吗？

索引文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 $(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>
相关讨论

You can check this jsfiddle http：/ / / / / 1 jsfiddle.net af6lp modify EN根据你的需求。P＞＜／

脚本P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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);
}?

HTMLP＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>?
相关讨论

解决方案：take a look at thisP＞＜／jsbin演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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('...');
});
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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);
}

to add another只是有if / else for文本3。无知的西蒙。P＞＜／