在无线电点击时更改输入字段中的值

时间:2013-06-23 06:01:54

标签: jquery html

我正在开发一个项目,用户必须在两个项目中选择一个选项。选项是单选按钮。目前我正在获取keyup事件的结果。当用户选择一个选项然后在输入字段中输入值时,他将结果输入另一个结果输入字段。它的工作正常,但问题是当用户想要更改选项并选择其他选项时,他必须在输入字段中再次输入值,这是不正确的我想要做的是当他选择其他选项时结果应该自动更改结果输入字段,因为他已在输入字段中输入一次值。

此处为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

     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,这在右下拉列表中不可用。

提前致谢

1 个答案:

答案 0 :(得分:2)

您可以简化您的功能:

  • 删除广播中的点击事件,而不是使用更改事件。
  • 更改单选按钮标记以设置实际值,而不是稍后在
  • 上进行计算
  • 无需使用变量val来维护单选按钮的值。

脚本

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