text基于选中/未选中复选框的框值
textbox values based on checkbox checked/unchecked
我的问题很简单,不像看上去那么长。
我有7个id为text1、text2、text3、text4和text5、text6、text7的文本框,还有一个id为check的复选框。我通过JSON得到text1和text2的值分别为10和20,并在text7中显示合计30。text4、text5和text6的值为空,即这些文本框显示"0"。text3和text4将根据复选框自动填充。
当我选中复选框时,文本3中会自动填充"点数",文本4中会自动填写"100"。现在,总文本7将显示130。text5和text6的值显示为"0"。如果我要写一些东西,比如在文本5中说"10",在文本6中说"20",那么文本7的总数将显示160。如果我取消选中复选框,那么text3和text4的值将被删除,总数也将随之更改。我不知道如何在选中复选框后自动填充文本3和文本4,你知道吗?
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: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>
看看这个解决方案:
演示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('...');
});
$(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。易于理解的
相关文章:
- setIntervall如果复选框被选中,JS
- 主干-复选框保持选中状态
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 如何发现至少有一个复选框被选中或没有使用javascript
- 页面加载时复选框只选中一次?ASP.NET,C#
- jQuery复选框未选中检测问题
- 可以't取消选中该复选框(取消选中复选框时隐藏内容)
- 我可以让所有复选框都选中和不选中做同样的事情吗
- 如何知道JqGrid多选'全选'复选框被选中
- 从数据库检索值时,Jquery mobile复选框未选中
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- 去掉js可观察数组和复选框,选中绑定失败
- 如果复选框未选中且文本字段不为空,则显示警报
- 获取复选框值选中-JavaScript
- 复选框不能通过直接单击复选框来选中或取消选中
- 复选框在选中时触发函数,如果未选中,则触发其他函数
- jQuery:如何找到那个prevous复选框被选中
- 如何选中复选框是否选中,而价格滑块事件发生
- jQuery复选框组选中/取消选中仅工作一次
- 如何使验证适用于在 Ionic 复选框中选中的至少一个复选框