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

Posted

技术标签:

【中文标题】基于复选框选中/未选中的文本框值【英文标题】:textbox values based on checkbox checked/unchecked 【发布时间】:2012-03-06 13:35:45 【问题描述】:

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

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

当我选中复选框时,“点”将在 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>

【问题讨论】:

你能创建它的jsFiddle吗? 您必须在 text3、4 中显示的值并同样修复吗? @Logan..yes text4 的值固定为 100 @AmarPalsapure..我正在尝试小提琴,请给我一个想法 需要一个计算器来了解需求..:) 【参考方案1】:

你可以查看这个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>​

【讨论】:

感谢 Amar 您的回复,但点数应该在检查后写入 text3 但它没有发生,另一件事是当 100 填写在 text4 中时,如果我将编辑这 100 乘以 200 则总剩余一样怎么样?总数应该相应改变,我认为你的小提琴需要稍微修改,你能编辑你的小提琴吗 非常感谢 Amar 再有一个疑问,当我取消选中复选框(如 text3 的值 100 被删除)时,如何删除“POINTS” $("#check").change( 函数中,我正在重置文本3。在 else $("#text4").val("0"); 中,如果你不想删除它。【参考方案2】:

看看这个解决方案:

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 没问题!附言parseInt 中的 '10' 是定义的基数。基数是 2-32,代表要使用的数字系统。【参考方案3】:
$(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。很简单。

【讨论】:

以上是关于基于复选框选中/未选中的文本框值的主要内容,如果未能解决你的问题,请参考以下文章

easyui获取datagrid选中行的文本框值(已更改)

ms 访问 - 基于文本框值的复选框

如何检索动态框值(如果选中,则为真或假) - Angular 6

javascript 怎么获得单选框值

js 如何禁止选中文本

jquery脚本检查文本框是不是为空,或者复选框是不是被选中