在单选按钮上更改输入字段中的值 [英] change the value in input field on radio click

问题描述

我正在一个项目中，用户必须在两个项目中选择一个选项.选项是单选按钮.目前，我正在获取keyup事件的结果.当用户选择一个选项，然后在输入字段中输入值时，他在另一个结果输入字段中得到了结果.它的工作正常，但出现问题是当用户想要更改选项并选择另一个选项时，现在他不得不在输入字段中再次输入值，这是不正确的.我要执行的操作是当他选择另一个选项时，结果应自动更改了结果输入字段，因为他已经在输入字段中输入了一次值.

i am working on a project where user has to select an option among two. options are radio buttons. currently i am getting the result on keyup event. when user select one option and then enter the the value in input field he got the result in another result input field. its working fine but the problem arise when user want to change the option and select the other option now he has to enter the value again in input field which is not correct what i want to do is when he select the other option the result should automatically change in result input field as he already enter a value once in input filed.

此处 jsfiddle 用于整个过程

这是html:

       <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="25" class="rdbtn-style-social"  />Weekly
       </td>

这是结果输入

          result<input type="text"  name="final_res" id="final_res" class=""  style="width:100px;margin: 2px;"/>

这是我的jQuery

here is my jquery

     var val = 0;

     jQuery("#rdbtn-im-day").click( function(){
    if( jQuery(this).is(":checked") ){ // check if the radio is checked
         val = jQuery(this).val(); // retrieve the value
    }
    });

    jQuery("#rdbtn-im-week").click( function(){
    if( jQuery(this).is(":checked") ){ // check if the radio is checked
         val = jQuery(this).val() * 7; // retrieve the value
    }
   });  

   jQuery("#txt_im").keyup(function(){ 
   var txt_value =  jQuery(this).val();
    var res = txt_value * val;

    var final = parseInt(res);
    var MBresult = final/1024;

    jQuery('#final_res').val(MBresult.toFixed(2));

我正在使用jquery-1.3.2.min.js，它在右侧的下拉列表中不可用.

i am using jquery-1.3.2.min.js which was not avaialble in the right dropdown list.

提前感谢

推荐答案

您可以简化功能:

• 删除广播中的点击事件，而使用更改事件.
• 将单选按钮标记更改为设置实际值，而不是稍后进行计算
• 无需使用变量val来保持选中的单选按钮的值.

• Remove the click events on radio instead use a change event.
• Change you radio button markup to set the actual value rather than doing a calculation later on
• No need to use the variable val to maintain the value of radio button checked.

jQuery("#txt_im").keyup(setValue); // on keyup of textbox call the function to calculate
jQuery('[name="rdbtn-im"]').change(setValue); // on keyup of textbox call the function to calculate

function setValue() {
    var txt_value = jQuery("#txt_im").val(); //Get the textbox val
    var rad_val = jQuery('[name="rdbtn-im"]:checked').val(); //Get the checked radio val

    if (!txt_value.length || !rad_val.length) return; // Don't do if either of them is not available
    var res = txt_value * rad_val;
    var final = parseInt(res, 10);
    var MBresult = final / 1024;
    jQuery('#final_res').val(MBresult.toFixed(2));
}

无线电标记部分

<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</td>

小提琴

Fiddle

这篇关于在单选按钮上更改输入字段中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！