输入一一输入应在结果字段中显示添加的结果 [英] entry in input one by one should show added result in result field

查看:67
本文介绍了输入一一输入应在结果字段中显示添加的结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当用户在第一组的单选按钮中选择任何选项,然后在相应的输入字段中输入任何数字,然后选择下一个任意单选选项并在输入字段中输入任何值时,这一次它应将新结果与旧结果相加并将其显示在结果输入字段中,现在,如果他清空任何输入字段,则该值也应减去总结果并显示在结果字段中.

when user select any option in radio buttons in group one and then enter any number in respective input field and then select the next any radio option and enter any value in input field then this time it should add the new result with old one and display it in result input field and now if he empty any input field then that should also minus from the total result and display it in result field.

我有很多这样的小组,但是在这里,我只把其中两个放在小组中以得到结果.

i have so many groups like that but here i just put two of them to get the result.

此处是 FIDDLE

这是jquery代码.我可以在jquery中工作,但不是很好,我为每个组使用了单独的代码,我知道必须有一种方法可以通过通用代码获得全部功能,但我又不擅长jquery

here is the jquery code. i can work in jquery but not very good i used separate code for every group and i know there must be a way to get this whole functionality through generic code but again i am not good at 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));


}

事实上的用户可以自由选择任意数量的组,也可以在选择后自由删除任意数量的组.

infact user is free to select any number of groups or also free to remove any number of group after selection.

我知道当用户在选择第一个组之后选择第二个组时,小提琴会出现错误,它删除了wron的结果,我试图解决它,但是失败了,但是我定义了整个过程,这是我需要做的.我将非常感谢您的这种恩惠.

i know there is error in fiddle when user select 2nd group after the select of first it removes the result which is wron and i tried to solve it but failed but i define the whole seen what i need to do. i will be very thankfull to you for this kind favour.

推荐答案

HTML:

<table>
    <tr>
        <td>
            <input type="radio" name="rdbtn-im" id="rdbtn-im-day" value="25" class="rdbtn-style-social" />Daily&nbsp;
            <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&nbsp;
            <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;" />&nbsp;</td>
    </tr>
</table>
<br>result
<input type="text" name="final_res" id="final_res" class="" style="width:100px;margin: 2px;" />

jQuery:

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

FIDDLE

这篇关于输入一一输入应在结果字段中显示添加的结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆