当前位置： 文江博客话题详情

基于复选框选中/未选中的文本框值

发布于 2025-01-06 11:32:48 字数 2565 浏览 2 评论 0原文

我的问题很简单，不像看起来那么长。

我有 7 个具有 id text1、text2、text3、text4 和 text5、text6、text7 的文本框和一个具有 id 检查的复选框。我通过 JSON 获取 text1 和 text2 的值，分别为 10 和 20，并在 text7 中显示总计 30。 text4、text5 和text6 的值为空，即这些文本框显示“0”。 text3 和 text4 将根据复选框自动填充。

当我选中该复选框时，“Points”将在 text3 中自动填充，“100”将在 text4 中自动填充。现在text7 总数将显示130。text5 和text6 的值显示“0”。如果我要写一些东西，比如在text5中写“10”，在text6中写“20”，那么text7总计将显示160。如果我取消选中该复选框，则text3和text4的值将被删除，总计将相应更改。我不是选中复选框后能够知道如何自动填充text3和text4，有什么想法吗？

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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

も星光 2025-01-13 11:32:48

你可以查看这个jsFiddle： http://jsfiddle.net/Af6LP/1/ 修改为您的需求。

脚本

$(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>​

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>​
回复 原文
扮仙女 2025-01-13 11:32:48

看看这个解决方案：

演示 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('...');
});

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('...');
});
回复 原文
不乱于心 2025-01-13 11:32:48
$(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);
}

只需为 text3 添加另一个 if/else 即可。简单的。

$(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.

回复 原文
~没有更多了~

关于作者

悲欢浪云

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文