Javascript 输入中的条目应在结果字段中逐个显示添加的结果
当用户在第一组的单选按钮中选择任意选项,然后在各自的输入字段中输入任意数字,然后选择下一个任意单选选项并在输入字段中输入任意值时,此时应将新结果与旧结果相加,并在结果输入字段中显示,现在如果用户清空任何输入字段,则该值也应为负数从总结果中选择,并在结果字段中显示 我有很多这样的小组,但这里我只放了两个来得到结果 这是我的护照 这是jquery代码。我可以在jquery中工作,但不是很好,我为每个组使用了单独的代码,我知道一定有办法通过通用代码获得整个功能,但我不擅长jqueryJavascript 输入中的条目应在结果字段中逐个显示添加的结果,javascript,jquery,Javascript,Jquery,当用户在第一组的单选按钮中选择任意选项,然后在各自的输入字段中输入任意数字,然后选择下一个任意单选选项并在输入字段中输入任意值时,此时应将新结果与旧结果相加,并在结果输入字段中显示,现在如果用户清空任何输入字段,则该值也应为负数从总结果中选择,并在结果字段中显示 我有很多这样的小组,但这里我只放了两个来得到结果 这是我的护照 这是jquery代码。我可以在jquery中工作,但不是很好,我为每个组使用了单独的代码,我知道一定有办法通过通用代码获得整个功能,但我不擅长jquery jQuery(
jQuery("#txt_im").keyup(setValue);
jQuery('[name="rdbtn-im"]').change(setValue);
function setValue() {
var txt_value = jQuery("#txt_im").val();
var rad_val = jQuery('[name="rdbtn-im"]:checked').val();
if(!txt_value.length) {
jQuery('#final_res').val('');
return;
}
if (!rad_val.length) return;
var res = txt_value * rad_val;
var final = parseInt(res, 10);
var MBresult = final / 1024;
jQuery('#final_res').val(MBresult.toFixed(2));
}
var final2 = 0;
jQuery("#txt_fb").keyup(setValue2);
jQuery('[name="rdbtn-fb"]').change(setValue2);
function setValue2() {
var txt_value = jQuery("#txt_fb").val();
var rad_val = jQuery('[name="rdbtn-fb"]:checked').val();
if(!txt_value.length) {
jQuery('#final_res').val('');
return;
}
if (!rad_val.length) return;
var res2 = txt_value * rad_val;
final2 = parseInt(res2, 10) + final;
var MBresult = final2 / 1024;
jQuery('#final_res').val(MBresult.toFixed(2));
}
事实上,用户可以自由选择任意数量的组,也可以在选择后自由删除任意数量的组
我知道当用户在选择第一组后选择第二组时,小提琴有错误。它删除了错误的结果,我试图解决它,但失败了,但我定义了整个过程,我知道我需要做什么。我将非常感谢你的好意 如果您使用的是chrome,那么console就是您最好的朋友() firefox有firebug,opera有蜻蜓(或者类似的东西?)。现在连游戏机都有了。在那里你可以看到所有的错误弹出 好的,首先让我们通过在闭包中包装它来清理一下这个问题(现在我们可以安全地使用$而不是jQuery,即使外部存在名称空间冲突)。此外,我们将对这两种情况使用单一函数,因为它们非常相似
!function ($) {
$(".txt-email").keyup(setValue);
$('.rdbtn-style-social').change(function(e) { setValue(e, true) });
function setValue(e, radio) {
if('undefined' === typeof radio) radio = false;
var attr = radio ? 'name' : 'id';
var tmp = e.target[attr].split('-');
var media = tmp[tmp.length - 1];
var txt_value = $("#txt-"+media).val();
var rad_val = $('.rdbtn-style-social[name="rdbtn-'+media+'"]:checked').val();
if (!txt_value.length || !rad_val.length) {
$('#final_res').val('');
return false;
}
var res = (txt_value | 0) * rad_val;
var final = parseInt(res, 10);
var MBresult = final / 1024;
$('#final_res').val(MBresult.toFixed(2));
}
}(jQuery);
(变量| 0与parseInt(变量,10)相同)。
因此,长话短说:当收音机或文本被更改时,函数被激发(如果它是收音机,则传递额外的参数)。我们检索是否要在im或fb上工作,然后做您想做的任何事情。我更改了输入的id,将uu替换为-(用于分割一致性)
最终JSFIDLE:HTML:
<table>
<tr>
<td>
<input type="radio" name="rdbtn-im" id="rdbtn-im-day" value="25" class="rdbtn-style-social" />Daily
<input type="radio" name="rdbtn-im" id="rdbtn-im-week" value="175" class="rdbtn-style-social" />Weekly
<input type="text" name="txb3" id="txt_im" class="txt-email" style="width:100px;margin: 2px;" />
</td>
</tr>
<tr>
<td class="sec-td-rdbtns-social">
<input type="radio" name="rdbtn-fb" id="rdbtn-fb-day" value="3500" class="rdbtn-style-social" />Daily
<input type="radio" name="rdbtn-fb" id="rdbtn-fb-week" value="500" class="rdbtn-style-social" />Weekly
<input type="text" name="txb1" id="txt_fb" class="txt-email" style="width:100px;margin: 2px;" /> </td>
</tr>
</table>
<br>result
<input type="text" name="final_res" id="final_res" class="" style="width:100px;margin: 2px;" />
我的问题被浏览了33次,但没有人回答????是否有任何问题??使用一个函数作为所有按钮和输入的绑定。它应该结合所有这些值,并将其放入结果中。尊敬的Barmer,你能给我发送任何类似功能的示例链接,以便我可以继续吗?或者你能编辑我的小提琴吗?非常感谢你的回复,但仍然有两个问题,一个小问题和一个大问题。次要的一点是,当用户点击第二组无线电,因为他已经选择了ist组无线电,然后答案消失,这不是我想要的。让我陷入地狱的主要问题是,让用户选择两个组,他现在有一个完整的最终结果,但现在他想删除其中的任何一个,例如他清空ist one输入字段,现在应该从最终结果中删除相应的结果,反之亦然。再次感谢Sirtkhanks Barmer回复,但我正在寻找解决方案的问题仍然存在,还有一个额外的错误。当用户选择第一个每日单选按钮,然后在输入字段中输入任何数字时,最终结果将显示在结果字段中,但现在他想从第二组中选择任何按钮,它也应该是相同的,他选择任何按钮,然后在相应的字段中输入任何数字,结果显示在结果字段中,因为他已经选择了ist组,现在组合结果也应该出现,而且如果他从任何输入字段中删除了数字,那么它的结果也应该从最终结果中删除。我已经更改了HTML。有两个问题:一,。您没有
标记,因此
和
被忽略。2.在一行中,您将收音机和输入置于单独的
标签中,在另一行中,您将它们置于一个
标签中。我将它们放在两行中,这样我就可以使用.sibles()
查找与单选按钮相关的输入。如果要将它们分开,可以使用其他DOM导航功能,例如.parent().next().children(“.txt电子邮件”)
。尊敬的Barmer tou终于成功了,非常感谢这正是我所需要的,现在我可以将其应用于任何数量的团体。让我试试,如果我遇到任何问题,我会联系oyu,但现在我的hart真的很想亲吻你的额头。再次感谢尊敬的Barmer,我在html中做了一些小小的改变,正是由于这个原因。兄弟姐妹现在不工作了,看看这把小提琴
jQuery(".txt-email").keyup(setValue);
jQuery('.rdbtn-style-social').change(setValue);
function setValue() {
var total = 0;
$(".rdbtn-style-social:checked").each(function () {
var myInput = $(this).siblings(".txt-email").val();
if (myInput.length) {
total += myInput * $(this).val();
}
});
if (total) {
jQuery('#final_res').val((total / 1024).toFixed(2));
} else {
jQuery('#final_res').val('');
}
}